$('.show-tool-tip').mouseenter(function(e) { // Disable the default tooltip. e.preventDefault(); var $this = $(this); $this.attr('tt', $this.attr('title')) .removeAttr('title'); // Store our timeout function in .data $this.data("hover_delay", setTimeout(function(title) { $('<aside class="tool-tip"><p>'+$this.attr('tt')+'</p></aside>').hide() .appendTo( $this ) .css( { 'top' : (e.pageY + 16) + "px", 'left' : (e.pageX - 40) + "px" } ).fadeIn(500); } , 1600)); } ).mouseleave(function() { var hover_delay = $(this).data("hover_delay"); if (hover_delay) { clearTimeout(hover_delay); $(this).attr('title', $(this).attr('tt')); $(this).children('.tool-tip').fadeOut(); } });
<span class="show-tool-tip" title="This is a demo tooltip, pretty neat huh?"> Hover Over Me </span>
.tool-tip:before { position: absolute; border: 12px solid transparent; border-bottom: 12px solid rgba(249, 174, 24, 0.4); content: ''; width: 0; height: 0; top: -28px; left: 24px; } .tool-tip { border: 4px solid rgba(249, 174, 24, 0.4); border-radius: 8px; padding: 0px; position: absolute; } .tool-tip p { background: rgba(255,255,255,0.85); color: #666666; border-radius: 4px; border: 1px solid #dddddd; margin: 0; padding: 12px; font-weight: 100; font-size: 12px; line-height: 18px; }