Minimal jQuery Tooltip Plugin - Globalliance Tooltip

Minimal jQuery Tooltip Plugin - Globalliance Tooltip
File Size: 8.51 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Globalliance Tooltip is a simple yet fully customizable jQuery plugin for creating tooltips with fade in/out effects on any Html elements using data-tt attribute.

How to use it:

1. Include jQuery javascript and the jQuery Globalliance Tooltip plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.globalliance.tooltip.1.1.js"></script>

2. The content of the tooltip is a data attribute called 'data-tt'. if this is not set, then the tooltip will not appear.

<span data-tt="This is a tooltip for SPAN">Hover me</span>

<a href="#" title="This is a tooltip" data-tt="This is a tooltip for A tag">Hover me</a>

3. The basic CSS to style the tooltips.

.tt {
    position: relative;
}

.ttC {
    position: absolute;
    display: none;
    width: auto;
    padding: 0 10px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background: #222;
    border-radius: 3px;
    white-space: nowrap;
}

.arrow {
    position: absolute;
    width: 0; 
	height: 0;
}

.arrow.arrowD {
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
	border-left: 10px solid transparent !important;
	border-right: 10px solid transparent !important;
	border-top: 10px solid #222;
}

.arrow.arrowU {
    left: 50%;
    top: -10px;
    margin-left: -10px;
	border-left: 10px solid transparent !important;
	border-right: 10px solid transparent !important;
	border-bottom: 10px solid #222;
}

.arrow.arrowR {
    right: 0;
    top: 50%;
    margin-right: -10px;
    margin-top: -10px;
	border-top: 10px solid transparent !important;
	border-bottom: 10px solid transparent !important;
	border-left: 10px solid #222;
}

.arrow.arrowL {
    left: 0;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
	border-top: 10px solid transparent !important;
	border-bottom: 10px solid transparent !important;
	border-right: 10px solid #222;
}

4. Initialize the plugin and set the options for the tooltips.

<script>
$(document).ready(function() {
$('a,span').tooltip({
backgroundColor: '#34495e',
arrow: true,
position: 'top'
});
});
</script>

5. All the customization options.

  • width: set the width of the tooltip (px, %, em)
  • backgroundColor: set the color of the tooltip (rgb, hexadecimals)
  • color: set the color of the text of the tooltip (rgb, hexadecimals)
  • arrow:  if the tooltip should have a arrow, (bolean)
  • position: the position of the tooltip (top, right, bottom, left)

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