Minimal Themeable Tooltip Plugin - jQuery jph-tooltip.js

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

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 href="#" class="example" data-tip="I am a tooltip">
  Hover Me

3. The basic CSS styles for the tooltip popup.

._jTips_holder {
  border:solid black 1px; 
  border-radius: 4px;

4. Create a theme for the tooltip.

._jTips_blue {
    theme: 'blue',

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