Skip to content

Instantly share code, notes, and snippets.

@lukasborawski
Last active December 30, 2015 00:39
Show Gist options
  • Save lukasborawski/7751463 to your computer and use it in GitHub Desktop.
Save lukasborawski/7751463 to your computer and use it in GitHub Desktop.
Simple tooltip plugin.
<span class="tooltip" data-tooltip="Tooltip data">Element</span>
var tooltip = $('.tooltip');
tooltip.on({
mouseenter: function(){
// show
if ($(this).data('tooltip').length){
$('body').append('<span class="tooltip_vwr"/>');
var tooltip_vwr = $('.tooltip_vwr');
if ($(this).hasClass('tooltip')) {
var offset_t = $(this).offset().top,
offset_l = $(this).offset().left,
tooltip_val = $(this).data('tooltip');
// tooltip content ascription
tooltip_vwr.html(tooltip_val);
// tooltip body position
var tooltip_vwr_h = tooltip_vwr.height();
tooltip_vwr.css({
top: offset_t - (tooltip_vwr_h + 15),
left: offset_l
});
setTimeout(function(){
tooltip_vwr.addClass('visible');
}, 50);
}
}
},
mouseleave: function() {
// reset
var tooltip_vwr = $('.tooltip_vwr');
tooltip_vwr.removeClass('visible');
setTimeout(function(){
tooltip_vwr.remove();
}, 5);
}
});
.tooltip_vwr {
opacity: 0;
z-index: 102;
color: #102753;
font-size: 11px;
font-size: .92em;
position: absolute;
display: none;
max-width: 200px;
padding: 3px 5px 3px;
text-shadow: 0 1px 0 #dfe9ff;
border: 1px solid #5192C0;
background-color: #abd6f4;
font-family: Arial, Tahoma, Verdana, sans-serif;
-webkit-box-shadow: inset 0 1px 0 #d2f1ff, inset 0 -1px 10px #6dcaff, 0 1px 2px #bfbfbf;
-moz-box-shadow: inset 0 1px 0 #d2f1ff, inset 0 -1px 10px #6dcaff, 0 1px 2px #bfbfbf;
box-shadow: inset 0 1px 0 #d2f1ff, inset 0 -1px 10px #6dcaff, 0 1px 2px #bfbfbf;
}
.tooltip_vwr.visible {
opacity: 1;
display: inline-block;
}
.tooltip_vwr::after {
content: "";
position: absolute;
bottom: -4px;
left: 10px;
margin: 0;
width: 5px;
height: 5px;
display: inline-block;
border-top: 1px solid #5192C0;
border-left: 1px solid #5192C0;
background-color: #8CCEF3;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(225), M12=-sin(225), M21=sin(225), M22=cos(225));
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(225), M12=-sin(225), M21=sin(225), M22=cos(225))";
zoom: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment