
Just another jQuery/HTML5 tooltip plugin used to create custom, CSS3 animated and hover-triggered tooltips on the webpage. Accepted directions are top, right, bottom and left.
How to use it:
1. Include the stylesheet tipit.css
in the head
section, and the JavaScript tipit.js
just before the closing body tag.
<link href="tipit.css" rel="stylesheet"> <script src="assets/tipit.js"></script>
2. Append the tooltip to a specified element using data-tipit-content
and data-tipit-placement
attribute.
<div data-tipit-content="Tooltip" data-tipit-placement="bottom"> Hove Me </div>
2. Append the tooltip to a specified element using data-tipit-content
and data-tipit-placement
attribute.
- data-tipit-content: custom tooltip conent.
- data-tipit-placement: top, right, bottom or left (default).
<div data-tipit-content="Tooltip" data-tipit-placement="bottom"> Hove Me </div>
3. Show hide the tooltip manually.
$('div').showTipit(); $('div').hideTipit();
Changelog:
2019-01-22
- Updated to the latest version
- Added Vanilla JS version
This awesome jQuery plugin is developed by mrReiha. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 22.01.2019
- Source