tooltip

simple css js tooltip

Note that you can show both simple text or complex html in you'r tooltip. For html tag you should use HTML entities (character entities) instead of tags itself, for example

text before break line <br/> text after break line

you shuld do it like this:

<span data-tooltip="text before break line &lt;br/&gt; text after break line" data-positions="right,top">hover me to show tooltip</span>

for html entities visit here: html entities

install:

npm i @sohrabi/tooltip

import:

import { initTooltip } from "@sohrabi/tooltip";

html element data attributes

data attribute	description
tooltip	Text Or Html to show as tooltip
positions	Comma separated list of positions to change the positioning default priority is as follow: bottom, top, right, left, bottomleft, bottomright, topleft, topright

---

html element attributes:

<span data-tooltip="test tooltip" data-positions="right,top">hover me to show tooltip</span>

initial tooltip

const tooltipInstance = initTooltip();

destroy tooltip

tooltipInstance.destroy();

---

custom configs:

name	default
disableOnMobile	false
color	#fff
backgroundColor	#000
borderRadius	4px

---

custom config sample

const tooltipInstance = initTooltip({ 
    disableOnMobile: true,
    backgroundColor: "lightyellow",
    color: "#9e0101"
    });

Online Demo

Open demo page

Using in ES5

If you want to use this library in you'r ES5 application, simple refrence the following js file.

<script type="text/javascript" src="https://unpkg.com/@sohrabi/tooltip/dist/index.js"></script>