(function(a){a.fn.tooltipster=function(b){var c=a.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"},b);return this.hover(function(){a("body").css("overflow-x","hidden");var b=a(this).attr("title");a(this).attr("title","");a(this).data("title",b);if(a.trim(c.overrideText).length>0){var b=c.overrideText}if(c.fixedWidth>0){var d=' style="width:'+c.fixedWidth+'px;"'}else{var d=""}a('<div class="'+c.tooltipTheme.replace(".","")+'"'+d+'><div class="tooltip-message-content">'+b+"</div></div>").appendTo("body").hide();if(c.followMouse==false){var e=a(this).outerWidth(false);var f=a(this).outerHeight(false);var g=a(c.tooltipTheme).not(".tooltip-kill").outerWidth(false);var h=a(c.tooltipTheme).not(".tooltip-kill").outerHeight(false);var i=a(this).offset();if(c.position=="top"){var j=i.left+g-(i.left+a(this).outerWidth(false));var k=i.left+c.offsetX-j/2;var l=i.top-h-c.offsetY-10}if(c.position=="top-left"){var k=i.left+c.offsetX;var l=i.top-h-c.offsetY-10}if(c.position=="top-right"){var k=i.left+e+c.offsetX-g;var l=i.top-h-c.offsetY-10}if(c.position=="bottom"){var j=i.left+g+c.offsetX-(i.left+a(this).outerWidth(false));var k=i.left-j/2;var l=i.top+f+c.offsetY+10}if(c.position=="bottom-left"){var k=i.left+c.offsetX;var l=i.top+f+c.offsetY+10}if(c.position=="bottom-right"){var k=i.left+e+c.offsetX-g;var l=i.top+f+c.offsetY+10}if(c.position=="left"){var k=i.left-c.offsetX-g-10;var m=i.top+h+c.offsetY-(i.top+a(this).outerHeight(false));var l=i.top-m/2}if(c.position=="right"){var k=i.left+c.offsetX+e+10;var m=i.top+h+c.offsetY-(i.top+a(this).outerHeight(false));var l=i.top-m/2}}if(c.followMouse==true){var g=a(c.tooltipTheme).not(".tooltip-kill").outerWidth(false);var h=a(c.tooltipTheme).not(".tooltip-kill").outerHeight(false);var n=a(c.tooltipTheme).not(".tooltip-kill").find(".tooltip-message-content").html();a(this).mousemove(function(b){a(c.tooltipTheme).not(".tooltip-kill").find(".tooltip-message-content").html("").html(n);var d=a(c.tooltipTheme).not(".tooltip-kill").outerHeight(false);if(c.position=="top"){a(c.tooltipTheme).not(".tooltip-kill").css({left:b.pageX-1-g/2+c.offsetX+"px",top:b.pageY-d-2-c.offsetY-10+"px"})}if(c.position=="top-right"){a(c.tooltipTheme).not(".tooltip-kill").css({left:b.pageX-8+c.offsetX+"px",top:b.pageY-d-2-c.offsetY-10+"px"})}if(c.position=="top-left"){a(c.tooltipTheme).not(".tooltip-kill").css({left:b.pageX-g+c.offsetX+7+"px",top:b.pageY-d-2-c.offsetY-10+"px"})}if(c.position=="bottom"){a(c.tooltipTheme).not(".tooltip-kill").css({left:b.pageX-g/2+c.offsetX-1+"px",top:b.pageY+15+c.offsetY+10+"px"})}if(c.position=="bottom-right"){a(c.tooltipTheme).not(".tooltip-kill").css({left:b.pageX-2+c.offsetX+"px",top:b.pageY+15+c.offsetY+10+"px"})}if(c.position=="bottom-left"){a(c.tooltipTheme).not(".tooltip-kill").css({left:b.pageX-g+c.offsetX+12+"px",top:b.pageY+15+c.offsetY+10+"px"})}if(c.position=="bottom-left"){a(c.tooltipTheme).not(".tooltip-kill").css({left:b.pageX-g+c.offsetX+12+"px",top:b.pageY+15+c.offsetY+10+"px"})}})}if(c.arrow==true){var o="tooltip-arrow-"+c.position;if(c.followMouse==true){if(o.search("right")>0){var p=o;o=p.replace("right","left")}else{var p=o;o=p.replace("left","right")}}if(o=="tooltip-arrow-right"){var q="笳";var r="top:"+(h/2-5)+"px"}if(o=="tooltip-arrow-left"){var q="笆ｶ";var r="top:"+(h/2-4)+"px"}if(o.search("top")>0){var q="笆ｼ"}if(o.search("bottom")>0){var q="笆ｲ"}if(c.arrowColor.length<1){var s=a(c.tooltipTheme).not(".tooltip-kill").css("background-color")}else{var s=c.arrowColor}var t='<div class="'+o+' tooltip-arrow" style="color:'+s+"; width:"+g+"px; display:none; "+r+'">'+q+"</div>"}else{var t=""}a(c.tooltipTheme).not(".tooltip-kill").css({top:l+"px",left:k+"px"}).append(t);if(c.animation=="slide"){a(c.tooltipTheme).not(".tooltip-kill").delay(c.delay).slideDown(c.speed,function(){a(".tooltip-arrow").fadeIn(c.speed)});if(c.timer>0){a(c.tooltipTheme).not(".tooltip-kill").delay(c.timer).slideUp(c.speed)}}else{a(".tooltip-arrow").show();a(c.tooltipTheme).not(".tooltip-kill").delay(c.delay).fadeIn(c.speed);if(c.timer>0){a(c.tooltipTheme).not(".tooltip-kill").delay(c.timer).fadeOut(c.speed)}}},function(){a(c.tooltipTheme).not(".tooltip-kill").clearQueue();tooltip_text=a(this).data("title");a(this).attr("title",tooltip_text).removeAttr("title-placeholder");a(c.tooltipTheme).addClass("tooltip-kill");if(c.animation=="slide"){a(".tooltip-kill").slideUp(c.speed,function(){a(".tooltip-kill").remove();a(".tooltip-kill .tooltip-arrow").remove();a("body").css("overflow-x","auto")})}else{a(".tooltip-kill").fadeOut(c.speed,function(){a(".tooltip-kill").remove();a(".tooltip-kill .tooltip-arrow").remove();a("body").css("overflow-x","auto")})}})}})(jQuery)
$('.tooltip-example-1').tooltipster();
$('.tooltip-example-2').tooltipster({
fixedWidth: 400,
followMouse: false,
position: 'bottom-left',
tooltipTheme: '.tooltip-custom-2'
});
$('.tooltip-example-3').tooltipster({
arrow: false,
delay: 500,
followMouse: true,
position: 'top-right',
timer: 8000,
tooltipTheme: '.tooltip-custom-3'
});
/* 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;
}
/* 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;
}
/* Main */
#tooltip-text-saver {
position: fixed;
top: 0px;
left: 0px;
color: #fff;
z-index: 99999999;
}
.example {
width: 306px;
float: left;
margin-right: 30px;
}
.test {
width: 304px;
text-align: center;
color: #fff;
padding: 15px 0px;
text-align: center;
background: #333333;
border-radius: 2px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background: #141414; /* Old browsers */
background: -moz-linear-gradient(top, #141414 1%, #2b2b2b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#141414), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #141414 1%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #141414 1%,#2b2b2b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #141414 1%,#2b2b2b 100%); /* IE10+ */
background: linear-gradient(top, #141414 1%,#2b2b2b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#141414', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 0px 2px rgba(255,255,255,0.5);
border: 1px solid #333333;
}
.test:hover {
background: #000;
}
.code {
width: 274px;
font-size: 12px;
line-height: 18px;
border: 1px dashed #c0c0c0;
border-top: none;
padding: 15px 15px 0px;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-ms-transition: all 300ms;
transition: all 300ms;
box-shadow: 0px 0px 30px rgba(255,255,255,0);
}
.code:hover {
border: 1px dashed #333;
border-top: none;
box-shadow: 0px 0px 30px #409cf2;
}
.code-2 {
width: 946px;
font-size: 12px;
line-height: 18px;
border: 1px dashed #c0c0c0;
padding: 15px 15px 0px;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-ms-transition: all 300ms;
transition: all 300ms;
margin-bottom: 30px;
box-shadow: 0px 0px 30px #fff;
}
.code-2:hover {
border: 1px dashed #333333;
box-shadow: 0px 0px 30px #409cf2;
}
table tr {
background-color: #f3f3f3;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-ms-transition: all 300ms;
transition: all 300ms;
}
table tr:hover {
background-color: #fffceb;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
table tr:nth-child(even):hover {
background-color: #fffceb;
}
table td {
padding: 15px;
}
.option-name {
width: 15%;
font-size: 20px;
line-height: 26px;
font-weight: 400;
font-family: Courier;
color: #409cf2;
}
.option-values {
width: 20%;
font-weight: 400;
}
/* Tooltips */
.tooltip-custom-2 {
background-color: #d7dce1;
border: 1px solid #afb8c0;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 16px;
position: absolute;
padding: 10px;
border-radius: 2px;
text-align: center;
z-index: 9999999;
pointer-events: none;
width: auto;
color: #000;
text-align: left;
}
.tooltip-custom-2 img {
margin-right: 10px;
border-radius: 2px;
float: left;
}
.tooltip-custom-2 .tooltip-arrow {
text-shadow: 0px -2px 0px #afb8c0, 1px 0px 0px #afb8c0, -1px 0px 0px #afb8c0;
}
.tooltip-custom-3 {
background: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 16px;
position: absolute;
padding: 10px;
border-radius: 2px;
text-align: center;
z-index: 9999999;
pointer-events: none;
width: auto;
color: #3d3d3d;
text-align: left;
border: 2px solid #3d3d3d;
}
/* Themes */
.theme-preview a {
padding: 10px;
width: auto;
text-align: center;
display: inline-block;
opacity: 0.8;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-ms-transition: all 300ms;
transition: all 300ms;
margin-right: 10px;
}
.theme-preview a:hover {
opacity: 1;
}
#themes em {
display: block;
margin-top: 30px;
font-size: 12px;
line-height: 12px;
}
.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-chocolate-preview {
background-color: #7f5d3c;
border: 2px solid #654728;
color: #fafaeb !important;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 12px;
border-radius: 4px;
}
.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-clean-cut-preview {
background-color: #f9f9f9;
border: 1px solid #dadada;
box-shadow: inset 0px 1px 0px #fff;
color: #595959 !important;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 12px;
border-radius: 4px;
padding: 12px 10px !important;
}
strong {
font-weight: 700;
}
span{color:red;}
<div class="example">
<div class="test tooltip-example-2" title="<img src='http://placehold.it/50x50' align='left' />I am EXAMPLE. <strong>Strong!</strong>, <span>span!</span> and more!">FooBar</div>
</div>