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>

<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.