A jQuery plugin for modern tooltips supporting dynamic elements and messages.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="[YOUR-SCRIPTS-DIRECTORY]/tooltip-bundle.min.js"></script>There are two ways that tooltips can be added to an element:
Method 1: Using only JavaScript (RECOMMENDED)
Method 2: Using HTML attributes and classes
Add your tooltips to elements in $(document).ready.
$(document).ready(function(){
$('#my-element').tooltip({MY OPTIONS});
});| Title | Required / Optional | Description |
|---|---|---|
| text | Required | The text the tooltip should contain. |
| delay | Optional | The amount of time to wait before displaying the tooltip when the user moves the mouse onto the element (in ms). Defaults to 0 |
| fadeDuration | Optional | Fade out duration (in ms). Defaults to 250. |
| fontSize | Optional | The size for the text in the tooltip (defaults to 1.0em). |
| theme | Optional | The tooltip theme to use ('dark' or 'light'). Dark is a tooltip with a black background and white text while light is one with a white background and dark grey text. Defaults to dark. |
| textColor | Optional | The color the tooltip text should be (this overrides the default text colors associated with the theme option. See theme option for defaults. |
| shadowColor | Optional | The color of the shadow that is cast by the tooltip. Defaults to '#000' |
| fontFamily | Optional | The font family to use for the text in the tooltip. Defaults to 'Arial, Helvetica, sans-serif'. Example fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial" |
Example: Adding a tooltip using the default settings:
$(document).ready(function(){
$('#my-element').tooltip({text: 'This is a tip'});
});Example: Adding a tooltip that has a custom font-family and appears 400ms after the mouse enters the element:
$(document).ready(function(){
$('#my-element').tooltip({
text: 'This is a tip',
fontSize: '14px',
theme: 'light',
fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial",
delay: 400
});
});The following methods can only be used on tooltips that were added using Method 1.
$('#my-element').tooltip('setText', 'This is the new tooltip text');$('#my-element').tooltip('autoTip', {MY OPTIONS});| Title | Required / Optional | Description |
|---|---|---|
| displayDuration | Optional | How long the tooltip should be displayed (in ms). Defaults to 5000. |
| fadeOutDuration | Optional | Duration of the fade out (in ms). Defaults to 1000. |
| onShowCallback | Optional | A function to call when the tooltip appears. |
| onHideCallback | Optional | A function to call when the tooltip disappears. |
Example: Changing the text of a tooltip using setText and then automatically displaying it using autoTip
$('#social-messages-button').tooltip('setText', 'You have 1 new message');
$('#social-messages-button').tooltip('autoTip', {
displayTime: 4000,
fadeOutDuration: 5000,
onShowCallback: function(){
// play notification sound
}
});Define your global tip settings in $(document).ready
$(document).ready(function(){
ToolTip.init({
delay: 400,
fadeDuration: 250,
fontSize: '1.0em',
theme: 'light',
textColor: '#757575',
shadowColor: '#000',
fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial"
});
});Add tooltips to your HTML markup by adding the tip-hotspot class and data-tip attribute.
<button class="tip-hotspot" data-tip="This is the tooltip text">Button text here</button>