File Size: 9076KB
Total Views: 891
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
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.
Features:
- No framework required.
- Light-weight and smooth transition.
- Easy to implement and modify.
- html5tooltips are compatible with all modern browsers.
How to use it:
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>Add extra attributes to customize a tooltip.
<span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin"></span>Customization inheritance
<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>Advanced usage
You may use a JavaScript constructor to abstract from your view layer.
html5tooltips({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});HTML5Tooltip UI Component
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();Plugin’s default options:
- animateFunction – Choose one of the available animate functions:
fadein,foldin,foldout,roll,scalein,slidein,spin. Default valuefadein. - color – Any CSS color or one of the predefined colors:
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. - contentText – Text for a tooltip; HTML may be applied.
- contentMore – Text for the expanded version of a tooltip which shows up when focused on a target element; HTML may be applied.
- delay – Delay the tooltip show up in milliseconds. Default value is
500. - hideDelay – Delay the tooltip hide in milliseconds, if the tooltip is persistent. Default value is
300. - disableAnimation – Disable the animation:
trueorfalse. Default value isfalse. - maxWidth – The maximum width of the expanded version of the tooltip.
- persistent – If set to true, the tooltip will wait for
hideDelaynumber of milliseconds before hide. Default value isfalse. - stickTo – Choose one of the available stick values:
bottom,left,right,top. Default value isbottom. - stickDistance – The
numberof pixels that represent the distance between the tooltip and a target element. - targetSelector – A CSS selector which is used to catch a target element in the document.
List of possible data-* attributes
- data-tooltip – Value for the
contentTextparameter. - data-tooltip-animate-function – Value for the
animateFunctionparameter. - data-tooltip-disable-animation – Value for the
disableAnimationparameter. - data-tooltip-color – Value for the
colorparameter. - data-tooltip-delay – Value for the
delayparameter. - data-tooltip-hide-delay – Value for the
hideDelayparameter. - data-tooltip-maxwidth – Value for the
maxWidthparameter. - data-tooltip-more – Value for the
contentMoreparameter. - data-tooltip-persistent – Value for the
persistentparameter. - data-tooltip-stickto – Value for the
stickToparameter.
