Xgraf
4/19/2017 - 6:06 AM

Tooltips (jQuery). To use an additional jQuery Hover Delay (removes the blinking) - https://github.com/john-terenzio/jQuery-Hover-Delay

Tooltips (jQuery). To use an additional jQuery Hover Delay (removes the blinking) - https://github.com/john-terenzio/jQuery-Hover-Delay

Tooltips.js
content_copyfile_download
/* Tooltip
========================*/
/*

************ HTML file **************
<a href="#tooltip-1" class="tooltip-hover">Some text link 1
   <span class="tooltip" id="tooltip-1">Some text tooltip 1</span>
</a>
<a href="#tooltip-2" class="tooltip-hover">Some text link 2
   <span class="tooltip" id="tooltip-2">Some text tooltip 2</span>
</a>

<script src="/jquery.hoverdelay.min.js"></script>

************ CSSL file **************
.tooltip-hover{
   position: relative;
}
.tooltip{
    width:150px;
    padding:5px;
    background-color:#000;
    border-radius:3px;
    color:#fff;
    font-size:12px;
    position:absolute;
    left:50%;
    top:120%;
    z-index:1;
    margin-left:-75px;
    display:none
}
.tooltip:before{
    content:"";
    border-style:solid;
    border-width:0 5px 4px 5px;
    border-color:transparent transparent #000 transparent;
    position:absolute;
    top:-3px;
    left:50%;
    z-index:1;
    margin-left:-3px
}
*/

/* JS file
  ========================*/
  
// pluggable event listener to the item
$(".tooltip-hover").hover(function() {

    // create a variable for the current item
    var $this = $(this);

    // create a variable with the id from the href attribute
    var tooltipId = $this.attr("href");

    // to make the tooltip visible when hovering the mouse cursor
    $(tooltipId).fadeIn();

    }, function() {

    // make the tooltip invisible on mouse out
    $(".tooltip").fadeOut();

}, 200);