Minimalist jQuery Custom Tooltip Plugin - Tips

File Size: Unknown
Views Total: 987
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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() {
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.