jQuery Tutorials

Simple Tooltip with jQuery (only text)

Tags: jQuery

Hello guys, I created a simple tooltip with jQuery, in this version display only the 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 altattribute 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.

HTML

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.

<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="image.jpg" class="masterTooltip" title="Tooltip on image" />

CSS

The styling is very simple, you can create anything with your creativity, this is just a default setting for your future applications.

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

jQuery

The first step is to call the jQuery file.

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

Create a new script tag and insert the code.

<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 Logic

1. Grab the title
   First we need to grab the title from the link, which will be the text we want our tooltip to display. We need to do this because we’ll be removing the title from the link, in order to prevent the browser from displaying its default tooltip that will conflict with our custom one. By storing the text using the data command, we can recover and replace the link title later.
2. Hover over code
   Create a new paragraph element with a class of tooltip, we use the text method to set the tooltip’s contents. Add new node to the page using appendTo and setting the animation with .fadeIn.
3. Hover out code
   It's simple, restoring the title attribute and removing the tooltip.
4. Mouse move code
   This is important, as we’ll need to access the X and Y coordinates of the event in order to position the tooltip. This way the tooltip will follow the mouse around.

Conclusion

We replaced a tooltip with our own, where we can manipulate both the style and animation. If anyone has any questions, concerns, or comments please feel free to let me know!