html5tooltips.js
Light and clean tooltips written in pure javascript with CSS3 animation and no framework dependency. http://ytiurin.github.io/html5tooltipsjs
###Simple usage
The simple way to tie a tooltip text to a specific UI element is by adding data-* attribute to an element HTML representation.
<span id="refresh" data-tooltip="Refresh"></span>
###Advanced usage
You may use a javascript constructor. It's more flexible and configurable way.
html5tooltips({
contentText: "Refresh",
targetSelector: "#refresh"
});
Use CSS selectors to tie tooltips to DOM elements. You can make a tooltip stick to any side of the target element.
html5tooltips({
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});
You can add explanation text to a tooltip, which shows up when user focus on a target element. This feature is designed to explain text input fields and editable elements. You can use HTML formatting.
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"
});
Multiple tooltip definition.
html5tooltips([
{
contentText: "Delete",
targetSelector: "#delete"
},
{
contentText: "Refresh",
stickTo: "top",
targetSelector: "#refresh"
},
{
contentText: "Simple to remember",
contentMore: "Check that your login name is not used by anyone else.",
stickTo: "left",
maxWidth: "180px",
targetSelector: "#username"
}
]);
###List of possible parameters
animateFunction one of available animate functions: fadein
, foldin
, foldout
, roll
, scalein
, slidein
, spin
color one of available 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
; or any CSS color
contentText text for a tooltip; html may be applied
contentMore text for expanded version of tooltip which showup whenn focus on target element; html may be applied
disableAnimation disable the animation true
or false
stickTo one of available stick values: bottom
, left
, right
, top
stickDistance a number
of pixels that represent the distance between tooltip and target element
targetSelector css selector which is used to catch a target element in the document
targetXPath xPath value which is used to catch a target element in the document
maxWidth maximum width of expanded version of tooltip
###List of possible data-* attributes
data-tooltip value for contentText parameter
data-tooltip-animate-function value for animateFunction parameter
data-tooltip-color value for color parameter
data-tooltip-more value for contentMore parameter
data-tooltip-stickto value for stickTo parameter
data-tooltip-maxwidth value for maxWidth parameter
###Browser compatibility
Animation works in: Chrome 1.0, Firefox 2.0, Internet Explorer 10, Opera 10.5, Safari 3.2