Post by Elli on Aug 16, 2019 9:44:38 GMT -7
Style My Tooltips
An updated version of Manos Malihutsakis's style-my-tooltips script.
<head> (minified)
Above </body>
CSS
<head> (minified)
<script>
/**
* Style My Tooltips
* Manos Malihutsakis (http://manos.malihu.gr)
* http://manos.malihu.gr/style-my-tooltips-jquery-plugin
*/
!function(m){var o={init:function(s){s=m.extend({tip_follows_cursor:!1,tip_delay_time:700,tip_fade_speed:300,attribute:"title"},s),m("#s-m-t-tooltip").length||m("body").append("<div id='s-m-t-tooltip'><div></div></div>");var i=m("#s-m-t-tooltip");return i.css({position:"absolute",display:"none"}).data("smt-z-index",i.css("z-index")).children("div").css({width:"100%",height:"100%"}),m(document).on("mouseleave",".smt-current-element",function(){var t=m(this);clearTimeout(smtTooltip_delay),i.style_my_tooltips("hide",{speed:t.data("smt-fade-speed")}),m(document).unbind("mousemove",this.tip_mousemove),this.tip_mousemove=void 0,t.removeClass("smt-current-element"),""===t.attr(s.attribute)&&t.attr(s.attribute,t.data("smt-title"))}),this.on("mouseenter",function(t){var o=m(this),e=o.attr(s.attribute);o.addClass("smt-current-element").data({"smt-title":e,"smt-fade-speed":s.tip_fade_speed}).attr(s.attribute,""),i.style_my_tooltips("update",{title:e,speed:s.tip_fade_speed,delay:s.tip_delay_time,tip_follows_cursor:s.tip_follows_cursor}),this.tip_mousemove||(this.tip_mousemove=function(t){!function(t){var o=t.pageX,e=t.pageY;i.style_my_tooltips("position",{smtCursorCoordsX:o,smtCursorCoordsY:e})}(t)},m(document).bind("mousemove",this.tip_mousemove))})},update:function(t){var o=m(this);o.stop().css({display:"none","z-index":o.data("smt-z-index")}).children("div").text(t.title),smtTooltip_delay=setTimeout(function(){o.style_my_tooltips("show",{speed:t.speed,tip_follows_cursor:t.tip_follows_cursor})},t.delay)},show:function(t){m(this).stop().fadeTo(t.speed,1),t.tip_follows_cursor||(m(document).unbind("mousemove",this.tip_mousemove),this.tip_mousemove=void 0)},hide:function(t){m(this).stop().fadeTo(t.speed,0)},position:function(t){var o=m(this),e=m(window).scrollLeft(),s=m(window).scrollTop(),i=o.outerWidth(!0),d=o.outerHeight(!0),r=t.smtCursorCoordsX+i-e,n=t.smtCursorCoordsY+d-s;if(r<=m(window).width()&&r<=m(document).width())o.css("left",t.smtCursorCoordsX);else{var l=t.smtCursorCoordsX-i;e<=l?o.css("left",l):o.css("left",e)}if(n<=m(window).height()&&n<=m(document).height())o.css("top",t.smtCursorCoordsY);else{var u=t.smtCursorCoordsY-d;s<=u?o.css("top",u):o.css("top",s)}}};m.fn.style_my_tooltips=function(t){return o[t]?o[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void m.error("Method "+t+" does not exist"):o.init.apply(this,arguments)}}(jQuery);
</script>
Above </body>
<script>
$(function() {
// Style My Tooltips
(function styleMyTooltips() {
function paginateTooltips() {
$('[title]').style_my_tooltips({
tip_follows_cursor: true,
tip_delay_time: 0,
tip_fade_speed: 200,
});
}
paginateTooltips();
pb.events.on('afterSearch', paginateTooltips);
})();
});
</script>
CSS
#s-m-t-tooltip {
background: #222;
border-radius: 3px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(255, 255, 255, 0.3);
color: #fff;
font: 12px Verdana, Arial, sans-serif;
line-height: 16px;
margin: 24px 14px 8px 12px;
max-width: 300px;
padding: 0.5em 1em;
z-index: 10;
}