Simple Tooltip - Jquery
How can i make a simple tooltip using jquery code?
Snippet Code
Rate this page :
|
[ 0 votes]
|
The following jquery code can be used to make a simple tooltip.
<script type="text/javascript" src='./jquery.js'></script>
<style>
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.mtooltip').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>
<p title="Jquery Tooltip." class="mtooltip" style='width:130px;'>Mouse Over.</p>
Note: You need jquery.js file for run this file
