Beautiful jQuery tooltip
Published by Aslam
Here is a live demo that you can understand how this plugin works.
1Call style-sheet or internal style block between <head></head> tags.
<link rel="stylesheet" type="text/css" href="path-to/css/tooltipster.css" />
OR
<style type='text/css'>
.tooltipster-chocolate {
background-color: #7f5d3c;
border: 2px solid #5c3d1f;
color: #fafaeb;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 12px;
position: absolute;
padding: 10px;
border-radius: 4px;
text-align: center;
z-index: 9999999;
pointer-events: none;
width: auto;
overflow: visible;
}
.tooltipster-chocolate .tooltip-arrow {
text-shadow: 0px 2px 0px #654728, 1px 1px 0px #654728, -1px 1px 0px #654728;
}
.tooltipster-clean-cut {
background-color: #f9f9f9;
border: 1px solid #dadada;
box-shadow: inset 0px 1px 0px #fff;
color: #595959;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 12px;
position: absolute;
padding: 10px;
border-radius: 4px;
text-align: center;
z-index: 9999999;
pointer-events: none;
width: auto;
overflow: visible;
}
.tooltipster-clean-cut .tooltip-arrow {
text-shadow: 0px 2px 0px #dadada, 0px 1px 0px #dadada;
}
.tooltipster-smoke {
background-color: #111;
border: 2px solid black;
border-radius: 6px;
box-shadow: 5px 5px 7px #444;
opacity: 0.7;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 12px;
position: absolute;
padding: 10px;
text-align: center;
z-index: 9999999;
pointer-events: none;
width: auto;
overflow: visible;
}
.tooltipster-smoke .tooltip-arrow {
text-shadow: 5px 5px 7px #444;
}
/* This is the default styling for all Tooltipsters: */
.tooltip-message {
background: #000; /* <- for IE */
background: rgba(0,0,0,0.9);
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 12px;
position: absolute;
padding: 10px;
border-radius: 2px;
text-align: center;
z-index: 9999999;
pointer-events: none;
width: auto;
overflow: visible;
word-wrap:break-word;
}
/* When you want to create a second class for your Tooltipster messages, copy (or modify) this template and add your style to it. Don't forget to refer to it in your Tooltipster settings (tooltipClass: '.my-custom-theme') */
.my-custom-theme {
position: absolute;
text-align: center;
z-index: 9999999;
pointer-events: none;
width: auto;
/* Start styling here... */
}
/* Add a slight border radius to all images inside the Tooltipsters */
.tooltip-message img {
border-radius: 2px;
}
/* These next classes handle the styles for the little arrow attached to the tooltip. If you need to change the color of the arrow to match a custom Tooltipster theme, set it in your Tooltipster settings (arrowColor: '#yourcolor') */
.tooltip-arrow {
display: block;
text-align: center;
font-size: 12px;
line-height: 12px;
width: 100%;
height: 5px;
position: absolute;
left: 0px;
z-index: -1;
}
.tooltip-arrow-top {
bottom: -3px;
margin: 0 auto;
text-align: center;
}
.tooltip-arrow-top-right {
bottom: -3px;
margin-left: -10px;
text-align: right;
}
.tooltip-arrow-top-left {
bottom: -3px;
margin-left: 10px;
text-align: left;
}
.tooltip-arrow-bottom {
top: -10px;
margin: 0 auto;
text-align: center;
}
.tooltip-arrow-bottom-right {
top: -10px;
margin-left: -10px;
text-align: right;
}
.tooltip-arrow-bottom-left {
top: -10px;
margin-left: 10px;
text-align: left;
}
.tooltip-arrow-left {
top: 0px;
right: -18px;
margin: 0 auto;
text-align: right;
}
.tooltip-arrow-right {
top: 0px;
left: -8px;
margin: 0 auto;
text-align: left;
}
/* Some styling to enable the slide animation */
.tooltip-slide {
height: 0px;
position: absolute;
width: auto;
z-index: 9999999;
overflow: hidden;
}
</style>
2Add jQuery. if you have already called jQuery before, skip this step
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
3 Call External jQuery plugin script or insert code block between <head></head> tags.
<script type="text/javascript" src="http://aslamise.googlecode.com/files/jquery.tooltipster.min.js"></script>
OR
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function( $ ) {
$.fn.tooltipster = function( options ) {
var settings = $.extend({
animation: 'fade',
arrow: true,
arrowColor: '',
delay: 200,
fixedWidth: 0,
followMouse: false,
offsetX: 0,
offsetY: 0,
overrideText: '',
position: 'top',
speed: 100,
timer: 0,
tooltipTheme: '.tooltip-message'
}, options);
function animateOut(tooltipToKill) {
if(settings.animation == 'slide') {
$(tooltipToKill).slideUp(settings.speed, function() {
$(tooltipToKill).remove();
$("body").css("overflow-x", "auto");
});
}
else {
$(tooltipToKill).fadeOut(settings.speed, function() {
$(tooltipToKill).remove();
$("body").css("overflow-x", "auto");
});
}
}
return this.hover(function() {
if ($(settings.tooltipTheme).not('.tooltip-kill').length == 1) {
animateOut($(settings.tooltipTheme).not('.tooltip-kill'));
$(settings.tooltipTheme).not('.tooltip-kill').addClass('tooltip-kill');
}
$("body").css("overflow-x", "hidden");
var tooltip_text = $(this).attr('title');
$(this).attr('title', '');
$(this).data('title', tooltip_text);
if($.trim(settings.overrideText).length > 0) {
var tooltip_text = settings.overrideText;
}
if(settings.fixedWidth > 0) {
var fixedWidth = ' style="width:'+ settings.fixedWidth +'px;"';
}
else {
var fixedWidth = '';
}
$('<div class="'+ settings.tooltipTheme.replace('.','') +'"'+ fixedWidth +'><div class="tooltip-message-content">'+tooltip_text+'</div></div>').appendTo('body').hide();
if (settings.followMouse == false) {
var window_width = $(window).width();
var container_width = $(this).outerWidth(false);
var container_height = $(this).outerHeight(false);
var tooltip_width = $(settings.tooltipTheme).not('.tooltip-kill').outerWidth(false);
var tooltip_height = $(settings.tooltipTheme).not('.tooltip-kill').outerHeight(false);
var offset = $(this).offset();
if(settings.fixedWidth == 0) {
$(settings.tooltipTheme).not('.tooltip-kill').css({
'width': tooltip_width + 'px',
'padding-left': '0px',
'padding-right': '0px'
});
}
function dont_go_off_screen() {
var window_left = $(window).scrollLeft();
if((my_left - window_left) < 0) {
var arrow_reposition = my_left - window_left;
my_left = window_left;
$(settings.tooltipTheme).not('.tooltip-kill').data('arrow-reposition', arrow_reposition);
}
if (((my_left + tooltip_width) - window_left) > window_width) {
var arrow_reposition = my_left - ((window_width + window_left) - tooltip_width);
my_left = (window_width + window_left) - tooltip_width;
$(settings.tooltipTheme).not('.tooltip-kill').data('arrow-reposition', arrow_reposition);
}
}
if(settings.position == 'top') {
var left_difference = (offset.left + tooltip_width) - (offset.left + $(this).outerWidth(false));
var my_left = (offset.left + settings.offsetX) - (left_difference / 2);
var my_top = (offset.top - tooltip_height) - settings.offsetY - 10;
dont_go_off_screen();
if((offset.top - tooltip_height - settings.offsetY - 11) < 0) {
var my_top = 0;
}
}
if(settings.position == 'top-left') {
var my_left = offset.left + settings.offsetX;
var my_top = (offset.top - tooltip_height) - settings.offsetY - 10;
dont_go_off_screen();
}
if(settings.position == 'top-right') {
var my_left = (offset.left + container_width + settings.offsetX) - tooltip_width;
var my_top = (offset.top - tooltip_height) - settings.offsetY - 10;
dont_go_off_screen();
}
if(settings.position == 'bottom') {
var left_difference = (offset.left + tooltip_width + settings.offsetX) - (offset.left + $(this).outerWidth(false));
var my_left = offset.left - (left_difference / 2);
var my_top = (offset.top + container_height) + settings.offsetY + 10;
dont_go_off_screen();
}
if(settings.position == 'bottom-left') {
var my_left = offset.left + settings.offsetX;
var my_top = (offset.top + container_height) + settings.offsetY + 10;
dont_go_off_screen();
}
if(settings.position == 'bottom-right') {
var my_left = (offset.left + container_width + settings.offsetX) - tooltip_width;
var my_top = (offset.top + container_height) + settings.offsetY + 10;
dont_go_off_screen();
}
if(settings.position == 'left') {
var my_left = offset.left - settings.offsetX - tooltip_width - 10;
var my_left_mirror = offset.left + settings.offsetX + container_width + 10;
var top_difference = (offset.top + tooltip_height + settings.offsetY) - (offset.top + $(this).outerHeight(false));
var my_top = offset.top - (top_difference / 2);
if((my_left < 0) && ((my_left_mirror + tooltip_width) > window_width)) {
my_left = my_left + tooltip_width;
}
if(my_left < 0) {
var my_left = offset.left + settings.offsetX + container_width + 10;
$(settings.tooltipTheme).not('.tooltip-kill').data('arrow-reposition', 'left');
}
}
if(settings.position == 'right') {
var my_left = offset.left + settings.offsetX + container_width + 10;
var my_left_mirror = offset.left - settings.offsetX - tooltip_width - 10;
var top_difference = (offset.top + tooltip_height + settings.offsetY) - (offset.top + $(this).outerHeight(false));
var my_top = offset.top - (top_difference / 2);
if(((my_left + tooltip_width) > window_width) && (my_left_mirror < 0)) {
my_left = window_width - tooltip_width;
}
if((my_left + tooltip_width) > window_width) {
my_left = offset.left - settings.offsetX - tooltip_width - 10;
$(settings.tooltipTheme).not('.tooltip-kill').data('arrow-reposition', 'right');
}
}
}
if (settings.followMouse == true) {
var tooltip_width = $(settings.tooltipTheme).not('.tooltip-kill').outerWidth(false);
var tooltip_height = $(settings.tooltipTheme).not('.tooltip-kill').outerHeight(false);
var tooltip_content = $(settings.tooltipTheme).not('.tooltip-kill').find('.tooltip-message-content').html();
$(this).mousemove(function(e){
$(settings.tooltipTheme).not('.tooltip-kill').find('.tooltip-message-content').html('').html(tooltip_content);
var tooltip_height = $(settings.tooltipTheme).not('.tooltip-kill').outerHeight(false);
if(settings.position == 'top') {
$(settings.tooltipTheme).not('.tooltip-kill').css({
'left': ((e.pageX - 1) - (tooltip_width / 2) + settings.offsetX) + 'px',
'top': ((e.pageY - tooltip_height - 2) - settings.offsetY - 10) + 'px'
});
}
if(settings.position == 'top-right') {
$(settings.tooltipTheme).not('.tooltip-kill').css({
'left': e.pageX - 8 + settings.offsetX + 'px',
'top': ((e.pageY - tooltip_height - 2) - settings.offsetY - 10) + 'px'
});
}
if(settings.position == 'top-left') {
$(settings.tooltipTheme).not('.tooltip-kill').css({
'left': (e.pageX - tooltip_width + settings.offsetX) + 7 + 'px',
'top': ((e.pageY - tooltip_height - 2) - settings.offsetY - 10) + 'px'
});
}
if(settings.position == 'bottom') {
$(settings.tooltipTheme).not('.tooltip-kill').css({
'left': (e.pageX - (tooltip_width / 2) + settings.offsetX - 1) + 'px',
'top': (e.pageY + 15 + settings.offsetY + 10) + 'px'
});
}
if(settings.position == 'bottom-right') {
$(settings.tooltipTheme).not('.tooltip-kill').css({
'left': e.pageX - 2 + settings.offsetX + 'px',
'top': (e.pageY + 15 + settings.offsetY + 10) + 'px'
});
}
if(settings.position == 'bottom-left') {
$(settings.tooltipTheme).not('.tooltip-kill').css({
'left': (e.pageX - tooltip_width + settings.offsetX) + 12 + 'px',
'top': (e.pageY + 15 + settings.offsetY + 10) + 'px'
});
}
});
}
if (settings.arrow == true){
var arrow_class = 'tooltip-arrow-' + settings.position;
if (settings.followMouse == true) {
if(arrow_class.search('right') > 0) {
var temp_arrow_class = arrow_class;
arrow_class = temp_arrow_class.replace('right', 'left');
}
else {
var temp_arrow_class = arrow_class;
arrow_class = temp_arrow_class.replace('left', 'right');
}
}
if(arrow_class == 'tooltip-arrow-right') {
var arrow_type = '◀';
var arrow_vertical = 'top:' + ((tooltip_height / 2) - 5) + 'px';
}
if(arrow_class == 'tooltip-arrow-left') {
var arrow_type = '▶';
var arrow_vertical = 'top:' + ((tooltip_height / 2) - 4) + 'px';
}
if(arrow_class.search('top') > 0) {
var arrow_type = '▼';
}
if(arrow_class.search('bottom') > 0) {
var arrow_type = '▲';
}
if(settings.arrowColor.length < 1) {
var arrow_color = $(settings.tooltipTheme).not('.tooltip-kill').css('background-color');
}
else {
var arrow_color = settings.arrowColor;
}
var arrow_reposition = $(settings.tooltipTheme).not('.tooltip-kill').data('arrow-reposition');
if (!arrow_reposition) {
arrow_reposition = '';
}
else if (arrow_reposition == 'left') {
arrow_class = 'tooltip-arrow-right';
arrow_type = '◀';
arrow_reposition = '';
}
else if (arrow_reposition == 'right') {
arrow_class = 'tooltip-arrow-left';
arrow_type = '▶';
arrow_reposition = '';
}
else {
arrow_reposition = 'left:'+ arrow_reposition +'px;';
}
var arrow = '<div class="'+ arrow_class +' tooltip-arrow" style="color:'+ arrow_color +'; width:'+ tooltip_width +'px; display:none; '+ arrow_reposition +' '+ arrow_vertical +'">'+ arrow_type +'</div>';
}
else {
var arrow = '';
}
$(settings.tooltipTheme).not('.tooltip-kill').css({'top': my_top+'px', 'left': my_left+'px'}).append(arrow);
if(settings.animation == 'slide') {
$(settings.tooltipTheme).not('.tooltip-kill').delay(settings.delay).slideDown(settings.speed, function() {
$('.tooltip-arrow').fadeIn(settings.speed);
});
if(settings.timer > 0) {
$(settings.tooltipTheme).not('.tooltip-kill').delay(settings.timer).slideUp(settings.speed);
}
}
else {
$('.tooltip-arrow').show();
$(settings.tooltipTheme).not('.tooltip-kill').delay(settings.delay).fadeIn(settings.speed);
if(settings.timer > 0) {
$(settings.tooltipTheme).not('.tooltip-kill').delay(settings.timer).fadeOut(settings.speed);
}
}
}, function() {
$(settings.tooltipTheme).not('.tooltip-kill').clearQueue();
tooltip_text = $(this).data('title');
$(this).attr('title', tooltip_text);
$(settings.tooltipTheme).addClass('tooltip-kill');
animateOut('.tooltip-kill');
});
}
})( jQuery );
$(document).ready(function() {
$('.tpt').tooltipster({fixedWidth: 200,position: 'top'});
$('.tpb').tooltipster({fixedWidth: 200,position: 'bottom'});
$('.tpl').tooltipster({fixedWidth: 200,position: 'left'});
$('.tpr').tooltipster({fixedWidth: 200,position: 'right'});
$('.tptl').tooltipster({fixedWidth: 200,position: 'top-left'});
$('.tptr').tooltipster({fixedWidth: 200,position: 'top-right'});
$('.tpbl').tooltipster({fixedWidth: 200,position: 'bottom-left'});
$('.tpbr').tooltipster({fixedWidth: 200,position: 'bottom-right'});
});
});//]]>
</script>
4Now , lets test it.
Paste this anywhere in your blog or website's source code.
<a class='tpb' title='my awesome tooltip'>Tooltip</a>
(Please note that if you are using original tooltipster Code for this,then the classes always be 'tooltip',and if you are using script above,then it can be tpt,tpb,tpl,tpr,tptl,tptr,tpbl,tpbr- as you can specify the direction of the tooltip )
If everything works ,please be kind to tell it in comments, else start a discussion and find your solution.
Or you can go to tooltipster's project page and follow their instructions. they have made an easy guide for beginners
http://calebjacob.com/tooltipster/#getting-started
Comments
Post a Comment