Minimal Themeable Tooltip Plugin - jQuery jph-tooltip.js
File Size: | 7.17 KB |
---|---|
Views Total: | 0 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jph-tooltip.js is a lightweight, easy-to-style, gracefully degraded jQuery tooltip plugin that automatically extracts tooltip content from an element's title
or data-tip
attribute.
The plugin falls back to native browser tooltips when jQuery is unavailable, or JavaScript is disabled in the browser.
How to use it:
1. Load jQuery library and the jph-tooltip.js plugin's files in the HTML.
<link rel="stylesheet" href="/path/to/jph-tooltip.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jph-tooltip-plugin.js"></script>
2. Call the jphToolTip
function on the target elements with title
or data-tip
attributes.
<a href="#" class="example" title="I am a tooltip"> Hover Me </a> <a href="#" class="example" data-tip="I am a tooltip"> Hover Me </a>
$(function(){ $(".example").jphToolTip(); });
3. The basic CSS styles for the tooltip popup.
._jTips_holder { display:inline-block; border:solid black 1px; padding:20px; border-radius: 4px; }
4. Create a theme for the tooltip.
._jTips_blue { border-color:#3DC1DC; background-color:#BEEAF3; color:#4D9FBF; }
$(function(){ $(".example").jphToolTip({ theme: 'blue', }); });
This awesome jQuery plugin is developed by jph0789. For more Advanced Usages, please check the demo page or visit the official website.
- Prev: Create Smart Tooltips That Follow Cursor - jQuery Tip.js
- Next: None