Simple Tooltip with jQuery (only text)

A tooltip is an interface component that appears when a user hovers over a control. They’re already present in most browsers. When you provide a title attribute for a link or an alt attribute for an image, the browser will usually display it as a tooltip when the user hovers over that element. By storing the text using the data command, i can recover and replace the link "title" later.

The markup is really simple and flexible and adapts to many possible scenarios you might encounter. Must have a class "masterTooltip" which will launch the tooltip, and the tag "title" that will contain the text inside.

The ASP.NET Image Button Controller

 
<asp:imagebutton alternatetext="Delete user permenantly" 
class="masterTooltip" commandname="Delete" height="20px" 
id="BRemove" imageurl="~/Images/cross.png" runat="server" 
title="Delete user permenantly" tooltip="Delete user permenantly" 
width="20px"></asp:imagebutton>

CSS

 
.tooltip
{
  display: none;
  position: absolute;
  border: 1px solid #333;
  background-color: #161616;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  font-size: 12px Arial;
}

Jquery Library

 
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Jquery Script

 
    <script type="text/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 })
            });
    });
    </script>

The Output

By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)