Bootstrap Style Tooltip With jQuery - Tooltip.js

Bootstrap Style Tooltip With jQuery - Tooltip.js
File Size: 4.47 KB
Views Total: 81
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A tiny jQuery plugin that appends a Bootstrap-style tooltip to any elements without having to include the Bootstrap framework.

How to use it:

1. Load the minified version of the Tooltip.js plugin in the HTML document.

<link rel="stylesheet" href="jquery.tooltip.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery.tooltip.min.js"></script>

2. Add the data-toggle="tooltip" attribute to the target element and uses the title attribute to define the tooltip text as follows:

<button 
  data-toggle="tooltip" 
  title="Tooltip Content Here"
  >Hover Me
</button>

3. Determine the placement of the tooltip. Default: 'bottom'.

  • top
  • bottom
  • left
  • right
<button 
  data-toggle="tooltip" 
  title="Tooltip Content Here"
  data-placement="right"
  >Hover Me
</button>

This awesome jQuery plugin is developed by aprilsacil. For more Advanced Usages, please check the demo page or visit the official website.