Flexible Customizable Tooltip Plugin - jq-tooltip
File Size: | 45.9 KB |
---|---|
Views Total: | 706 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight, flexible, customizable and themeable jQuery tooltip plugin that allows displaying multiple tooltips on the same element.
More features:
- Position options: top, top-left, top-right, right, right-top, right-bottom, bottom, bottom-left, bottom-right, left, left-top, left-bottom.
- Built-in themes: strawberry, orange, banana, lime, blueberry, cocoa, silver, slate.
- The tooltip content can be specified in a data attribute or passed as a string.
- Custom tooltip template.
How to use it:
1. To get started, include jQuery (slim build) and the jq-tooltip plugin's files on the web page.
<link rel="stylesheet" href="tooltip.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="tooltip.js"></script>
2. Activate the tooltip functionality on the element.
- Update the tooltip on resize.
- Displays the tooltip on hover.
- Set the deault tooltip content.
- Close the tooltip on mouse leave.
var W = $(window); var PI = $('.item'); W.on('resize', function () { PI.tooltip('update'); }); PI.hover(function () { $(this).tooltip({ content: 'This is a tooltip', }); }, function () { $(this).tooltip('close'); });
3. Attach multiple tooltips to an element using the 'data-tooltip' attribute:
<div class="item" data-tooltip='[{"content": "Top","position": "top"},{"content": "Right","position": "right"},{"content": "Left 1","position": "left"}]'> Hover Me </div>
4. All possible configurations which can be passed via JavaScript or 'data' attribute.
// Template template: '<div class="jq-tooltip">{content}</div>', // The content can be specified in an element attribute or passed as a string content: undefined, // Positioning // (top, top-left, top-right, right, right-top, right-bottom, bottom, // bottom-left, bottom-right, left, left-top, left-bottom) position: 'top', // Theme // (strawberry, orange, banana, lime, blueberry, cocoa, silver, slate) theme: 'slate', // The width, if set to 0, will be calculated automatically width: 0, // Get parameters from the attribute attr: true, // Attribute Name (data-tooltip) attrID: 'tooltip', // Gap gap: 8, // Name of the custom class class: undefined, // ID for stored data (tooltip.data) dataID: 'tooltip.data'
Changelog:
2018-11-29
- minor update
2018-09-28
- minor improvements
2018-09-27
- JS update
This awesome jQuery plugin is developed by callisto2410. For more Advanced Usages, please check the demo page or visit the official website.