Our Blogs
Our every actions and thoughts.
Warning: Undefined variable $title in /var/www/vhosts/hostspacer.com/httpdocs/pages/blogs/index.php on line 13
A JQuery Tooltip Plugin
/*
* SimpleTooltip v.1.0
* Copyright(c) 2009 Host Spacer Pvt. Ltd.
* Contact us at info@hostspacer.com
*
*/
;(function($){
'use strict';
var defaults = {
trigger: 'hover',
place: 'auto',
theme: 'dark',
width: 200,
tooltip: 'simple-tooltip',
arrow: true,
single: true,
ajax: false,
action: null
};
var simpleTooltip = function(element, options){
this.el = $(element);
this.content = null;
this.wrapper = null,
this.biswal = null;
this.tid = 'biswal-' + (new Date()).getTime() + '-' + this.makeId(8);
this.settings = $.extend({}, defaults, options);
// initialize
this.init();
};
simpleTooltip.prototype = {
init: function () {
this.bind();
},
bind: function (){
var ths = this,
trigger = this.settings.trigger,
$el = $(this.el);
ths.tid = this.tid;
ths.biswal = $('#' + ths.tid);
ths.wrapper = ths.biswal.parent('div');
switch (trigger) {
case "click":
$el.click(function () {
$el.attr('href', 'javascript:void(0);');
if($(ths.wrapper).is(':visible')){
ths.close();
} else {
ths.open();
}
});
break;
default :
$el.hover(function () {
ths.open()
},function () {
ths.close();
});
}
ths.hide();
},
render: function () {
var ths = this,
$el = $(this.el),
tid = this.tid,
themeClass = ' ' + this.settings.tooltip + '-' + this.settings.theme,
contents,
ajaxurl,
html,
$body = $(document.body);
var attrx = $el.attr('data-simpletip-ajax');
var attrs = $el.attr('data-simpletip');
if(this.settings.ajax == true){
if(typeof attrx !== typeof undefined && attrx !== false){
ajaxurl = $el.attr('data-simpletip-ajax');
this.ajaxaction(ajaxurl);
contents = '';
} else {
if(typeof attrs !== typeof undefined && attrs !== false){
contents = $el.attr('data-simpletip');
} else {
contents = $el.attr('title') || $el.attr('alt') || $el.text();
}
}
} else if (this.content && typeof this.content == 'function') {
contents = this.content.call(this);
} else if (this.content && typeof this.content == 'object') {
contents = $(this.content).html();
} else {
if(typeof attrs !== typeof undefined && attrs !== false){
contents = $el.attr('data-simpletip');
} else {
contents = $el.attr('title') || $el.attr('alt') || $el.text();
}
}
html = '
'+
'
';
$body.append(html);
$el.attr('data-simpletip', $el.attr('title'));
$el.removeAttr('title');
ths.biswal = $('#'+tid);
ths.wrapper = ths.biswal.parent('div');
ths.pose();
},
open: function (){
var ths = this,
$el = $(this.el);
ths.close();
ths.render();
ths.wrapper = this.wrapper;
if($(ths.wrapper).is(':visible')){
ths.close();
} else {
$(ths.wrapper).show();
}
},
close: function () {
var ths = this,
$el = $(ths.el);
ths.wrapper = this.wrapper;
$el.attr('title', $el.attr('data-simpletip'));
$el.removeAttr('data-simpletip');
if(ths.settings.single == true){
if($('.' + this.settings.tooltip + '-box').is(':visible')){
$('.' + this.settings.tooltip + '-box').remove();
}
} else {
if($(ths.wrapper).is(':visible')){
$(ths.wrapper).remove();
}
}
},
hide: function(){
var ths = this,
$el = $(this.el);
$(document).on('click', function (e) {
var $t = $(e.target);
if (!$t.hasClass($el.attr('class')) && !$t.parents().hasClass($el.attr('class')) &&
!$t.is('.' + ths.settings.tooltip + '-box') &&
!$t.is('.' + ths.settings.tooltip) &&
!$t.is('.' + ths.settings.tooltip + '-content') &&
!$t.is('.' + ths.settings.tooltip + '-arrow')){
ths.close();
}
});
},
pose: function(){
var ths = this,
$el = $(ths.el),
wrap = $(ths.wrapper),
elLeft = $el.offset().left,
elTop = $el.offset().top,
gutter = 10,
winW = $(window).width(),
winH = $(window).height(),
winST = $(window).scrollTop(),
winSL = $(window).scrollLeft(),
elW = $el.outerWidth(),
elH = $el.outerHeight(),
posLeft = 0, posRight = 0, posTop = 0, posBottom = 0;
if (ths.settings.width){
$(wrap).css({'max-width': ths.settings.width + 'px'});
} else {
$(wrap).css({'max-width': ths.settings.width + 'px'});
}
var tipW = $(wrap).outerWidth(),
tipH = $(wrap).outerHeight();
if(winW < 600){
this.settings.place = 'bottom';
posTop = elTop + elH + gutter;
posLeft = elLeft + (elW/2) - (tipW/2);
} else {
if(this.settings.place == 'top' && winST <= 100){
this.settings.place = 'top';
posTop = elTop - tipH - gutter;
posLeft = elLeft + (elW/2) - (tipW/2);
} else if(this.settings.place == 'bottom' && winST >= 100){
posTop = elTop + elH + gutter;
posLeft = elLeft + (elW/2) - (tipW/2);
}
else if(this.settings.place == 'right' && elLeft + elW < winW/6){
posTop = elTop + elH/2 - tipH/2;
posLeft = elLeft + elW + gutter;
}
else if(this.settings.place == 'left' && elLeft > elW + (winW/6)*5){
posTop = elTop + (elH/2) - (tipH/2);
posLeft = elLeft - tipW - gutter;
} else {
if(elLeft + elW < winW/6){
this.settings.place = 'right';
posTop = elTop + elH/2 - tipH/2 + gutter;
posLeft = elLeft + elW + gutter;
} else if(elLeft > elW + (winW/6)*5){
this.settings.place = 'left';
posTop = elTop + (elH/2) - (tipH/2);
posLeft = elLeft - tipW - gutter;
} else if(winST <= 100){
this.settings.place = 'top';
posTop = elTop - tipH - gutter;
posLeft = elLeft + (elW/2) - (tipW/2);
} else {
this.settings.place = 'bottom';
posTop = elTop + elH + gutter;
posLeft = elLeft + (elW/2) - (tipW/2);
}
}
}
if(this.settings.arrow == true){
$('.' + this.settings.tooltip + '-arrow').attr('class', this.settings.tooltip + '-arrow ' + this.settings.place);
}
$(wrap).css({ top: posTop, left: posLeft});
},
action: function(){
if ($.isFunction( this.settings.action ) ) {
this.settings.action.call(this);
}
},
ajaxaction: function(ajaxurl){
var datastr = {},
tid = this.tid,
cont = ('.' + this.settings.tooltip + '-content');
$.ajax({
url: ajaxurl,
type: 'get',
data: datastr,
cache: false,
success: function(data){
$(cont).html(data);
},
error: function(xhr, status, error){
alert('error!');
}
});
},
makeId: function(length){
var strpass = '';
var chars = '123456789';
var charslen = chars.length;
for ( var i = 0; i < length; i++ ) {
strpass += chars.charAt(Math.floor(Math.random() * charslen));
}
return strpass;
}
};
$.fn.simpletip = function(options) {
return this.each(function () {
return new simpleTooltip(this, options);
});
};
})(jQuery);
'+
'
' +
''+ contents +'
';
if(this.settings.arrow == true){
html += '';
}
html += '
/*
* SimpleTooltip v.1.0 Style Sheet
* Copyright(c) 2009 Host Spacer Pvt. Ltd.
* Contact us at info@hostspacer.com
*
*/
.simple-tooltip-box {
display: none;
position:absolute;
z-index:999999;
}
.simple-tooltip {
box-shadow: 0 2px 3px #999;
padding: 4px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: 11px;
text-align: center;
vertical-align: middle;
line-height: 150%;
}
.simple-tooltip-arrow.top {
position: absolute;
z-index: 100;
top:100%;
left: 50%;
margin-left: -6px;
border-bottom: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
.simple-tooltip-arrow.bottom {
position: absolute;
z-index: 1000;
bottom:100%;
left: 50%;
margin-left: -6px;
border-top: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
.simple-tooltip-arrow.left {
position: absolute;
z-index: 1000;
top:50%;
left:100%;
margin-top: -6px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: none;
}
.simple-tooltip-arrow.right {
position: absolute;
z-index: 1000;
top:50%;
right:100%;
margin-top: -6px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: none;
}
/* DARK THEME */
.simple-tooltip-dark {
border: 1px solid #000;
color: #fff;
background: #222;
}
.simple-tooltip-dark .simple-tooltip-arrow.top {
border-top: 6px solid #222;
}
.simple-tooltip-dark .simple-tooltip-arrow.bottom {
border-bottom: 6px solid #222;
}
.simple-tooltip-dark .simple-tooltip-arrow.left {
border-left: 6px solid #222;
}
.simple-tooltip-dark .simple-tooltip-arrow.right {
border-right: 6px solid #222;
}
/* YELLOW THEME */
.simple-tooltip-yellow {
border: 1px solid #F1D031;
color: #444;
background: #FFFFA3;
}
.simple-tooltip-yellow .simple-tooltip-arrow.top {
border-top: 6px solid #FFFFA3;
}
.simple-tooltip-yellow .simple-tooltip-arrow.bottom {
border-bottom: 6px solid #FFFFA3;
}
.simple-tooltip-yellow .simple-tooltip-arrow.left {
border-left: 6px solid #FFFFA3;
}
.simple-tooltip-yellow .simple-tooltip-arrow.right {
border-right: 6px solid #FFFFA3;
}
/* LIGHT THEME */
.simple-tooltip-light {
border: 1px solid #DADADA;
color: #444;
background: #FAFAFA;
}
.simple-tooltip-light .simple-tooltip-arrow.top {
border-top: 6px solid #FAFAFA;
}
.simple-tooltip-light .simple-tooltip-arrow.bottom {
border-bottom: 6px solid #FAFAFA;
}
.simple-tooltip-light .simple-tooltip-arrow.left {
border-left: 6px solid #FAFAFA;
}
.simple-tooltip-light .simple-tooltip-arrow.right {
border-right: 6px solid #FAFAFA;
}
/* GREEN THEME */
.simple-tooltip-green {
border: 1px solid #1F7E4A;
color: #fff;
background: #2BAE66;
}
.simple-tooltip-green .simple-tooltip-arrow.top {
border-top: 6px solid #2BAE66;
}
.simple-tooltip-green .simple-tooltip-arrow.bottom {
border-bottom: 6px solid #2BAE66;
}
.simple-tooltip-green .simple-tooltip-arrow.left {
border-left: 6px solid #2BAE66;
}
.simple-tooltip-green .simple-tooltip-arrow.right {
border-right: 6px solid #2BAE66;
}
/* BLUE THEME */
.simple-tooltip-blue {
border: 1px solid #26639F;
color: #fff;
background: #3180CE;
}
.simple-tooltip-blue .simple-tooltip-arrow.bottom {
border-bottom: 6px solid #3180CE;
}
.simple-tooltip-blue .simple-tooltip-arrow.top {
border-top: 6px solid #3180CE;
}
.simple-tooltip-blue .simple-tooltip-arrow.left {
border-left: 6px solid #3180CE;
}
.simple-tooltip-blue .simple-tooltip-arrow.right {
border-right: 6px solid #3180CE;
}
/* RED THEME */
.simple-tooltip-red {
border: 1px solid #D6141A;
color: #fff;
background: #EC3539;
}
.simple-tooltip-red .simple-tooltip-arrow.bottom {
border-bottom: 6px solid #EC3539;
}
.simple-tooltip-red .simple-tooltip-arrow.top {
border-top: 6px solid #EC3539;
}
.simple-tooltip-red .simple-tooltip-arrow.left {
border-left: 6px solid #EC3539;
}
.simple-tooltip-red .simple-tooltip-arrow.right {
border-right: 6px solid #EC3539;
}
Basic Use
Advanced Use
Open on click
$(document).ready(function(){
$('.simpletip').simpletip({ trigger: 'click'});
});
Change Theme
$(document).ready(function(){
$('.simpletip').simpletip({ theme: 'green'});
});
Get Remote File as Tooltip
$(document).ready(function(){
$('.simpletip').simpletip({ ajax: true});
});
HTML
Hover MeChange Theme
It supports following themes: 'light', 'dark', 'green', 'blue', 'yellow', 'red'
But you can also make a custom theme by adding the following css code snippet in your css file.
Look at the word "custom" and change it to your like with colors you like.
/* CUSTOM THEME */
.simple-tooltip-custom {
border: 1px solid #D6141A;
color: #fff;
background: #EC3539;
}
.simple-tooltip-custom .simple-tooltip-arrow.bottom {
border-bottom: 6px solid #EC3539;
}
.simple-tooltip-custom .simple-tooltip-arrow.top {
border-top: 6px solid #EC3539;
}
.simple-tooltip-custom .simple-tooltip-arrow.left {
border-left: 6px solid #EC3539;
}
.simple-tooltip-custom .simple-tooltip-arrow.right {
border-right: 6px solid #EC3539;
}
Demo
Hover MeSupport
Location
Trimurti Nagar, Jabalpur(M.P.), India - 482002
Mobile: +91 - 81208 - 40046
Email: info@hostspacer.com
About Us |
Blogs |
Contact Us |
Refund Policy |
Payment Policy |
Privacy Policy |
Terms of Use
© 2009 - 2024 Host Spacer. All rights reserved. Designed & Hosted by: Host Spacer