Minimalist jQuery Custom Tooltip Plugin - Tips

tips is a super simple jQuery plugin that shows up fully stylable tooltips from title attribute in any Html elements.

How to use it:

1. Add jQuery library and the jQuery tips plugin in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jq-tips.js" ></script>

2. Add a CSS class to any html elements. Use title attribute to define the tooltip content that supports inline elements.

<a class="any-class-you-want" href="#" title="With great tooltips,<br />comes great styles">Some link</a>.

3. Call the plugin to enable the custom tooltips.

$(function() {
$('.any-class-you-want').jqTips({
delay: 100
});
});

4. The sample CSS to style the tooltips.

.jq-tips_tip {
  position: absolute;
  display: none;
  z-index: 10000;
}

.jq-tips_pointer {
  float: left;
  position: relative;
  left: 50%;
  z-index: 10000;
  margin-left: -10px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.6);
  border-width: 10px;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
}

.jq-tips_content {
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  padding: 7px;
  color: #FFF;
  position: relative;
  z-index: 1;
}

---

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