Html5tooltips is clean and light-weight JavaScript tooltip plugin with smooth 3D animation. It has various types of predefined animation effects and colors that can be used easily according to your requirements. You can also modify the position of the tooltip with data-tooltip-stickto to your desire location.
1. Include the Javascript html5tooltips.js at the bottom of the web page.
<script src="path/to/html5tooltips.js"></script>2. Include the CSS html5tooltips.css in the header of the page.
<link rel="stylesheet" href="path/to/html5tooltips.css">Add html5tooltips.animation.css to enable animation effect on tooltip.
<link rel="stylesheet" href="path/to/html5tooltips.animation.css">3. Add the basic HTML to the page and we're ready to go.
<span data-tooltip="Refresh"></span><span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin"></span><body data-tooltip-animate-function="foldin">
<div data-tooltip-color="bamboo">
<span data-tooltip="Build"></span>
<span data-tooltip="Refresh"></span>
<span data-tooltip="Delete"></span>
</div>
</body>You may use a JavaScript constructor to abstract from your view layer.
html5tooltips({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});var tooltip = new HTML5TooltipUIComponent;
var target = document.getElementById("refresh");
tooltip.set({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
target: target
});
target.addEventListener('mouseenter',function(){
tooltip.show();
});
target.addEventListener('mouseleave',function(){
tooltip.hide();
});
tooltip.mount();fadein, foldin, foldout, roll, scalein, slidein, spin. Default value fadein.daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper.500.300.true or false. Default value is false.hideDelay number of milliseconds before hide. Default value is false.bottom, left, right, top. Default value is bottom.number of pixels that represent the distance between the tooltip and a target element.data-* attributescontentText parameter.animateFunction parameter.disableAnimation parameter.color parameter.delay parameter.hideDelay parameter.maxWidth parameter.contentMore parameter.persistent parameter.stickTo parameter.<span data-tooltip="left" data-tooltip-stickto="left">left</span>Position - bottom, left, right, top
<span data-tooltip="foldin" data-tooltip-animate-function="foldin">foldin</span>Animation - fadein, foldin, foldout, roll, scalein, slidein, spin, fadein
<span data-tooltip="peacock" data-tooltip-color="peacock">peacock</span>Color - daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper
<input id="password" type="text" placeholder="Type Here">html5tooltips({
contentText: "Not less then 8 symbols",
contentMore: "Use lower and UPPER case letters, num<span style='color:red'>6</span>ers and spec<span style='color:red'>!</span>al symbols to make password safe and secure.",
maxWidth: "180px",
targetSelector: "#password"
});