tooltip

by vivekchidura

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<a href="#" title="This will show up in the tooltip" class="masterTooltip">Your Text</a>
<p title="Mouse over the heading above to view the tooltip." class="masterTooltip">Mouse over the heading text above to view it's tooltip.</p>
<img src="https://vchidura.dev.local/ap/ap_images_v2/icon-calendar-16-444444.png" class="masterTooltip" title="Tooltip on image" />

CSS

.tooltip {
	 position: absolute;
      width: 150px;
      height: 85px;
      line-height: 30px;
      padding: 10px;
      font-size: 14px;
      text-align: center;
      color: rgb(0, 0, 0);
      background: rgb(255, 255, 255);
      border: 4px solid rgb(255, 0, 0);
      border-radius: 5px;
      text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
      box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px;
}

JavaScript

$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});