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

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

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:

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>