Skip to content

Instantly share code, notes, and snippets.

@pggx999

pggx999/index.html

Created May 11, 2015 15:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pggx999/349eb3b1c932e5bcaf2f to your computer and use it in GitHub Desktop.
Save pggx999/349eb3b1c932e5bcaf2f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Simple Tootltip // source http://jsbin.com/camige
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta name="description" content="Simple Tootltip">
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.tooltip {
display:none;
position:absolute;
border:1px solid #FF0000 ;
background-color:#DDD;
border-radius:5px;
padding:10px;
color:#000;
font-size:12px Arial;
}
</style>
</head>
<body>
<a href="#" eeetitle="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">Mouseeeee over the heading text above to view it's tooltip.</p>
<img src="image.jpg" class="masterTooltip" title="Tooltip on image" />
<script id="jsbin-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 - 60; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex });
});
});
</script>
<script id="jsbin-source-css" type="text/css">.tooltip {
display:none;
position:absolute;
border:1px solid #FF0000 ;
background-color:#DDD;
border-radius:5px;
padding:10px;
color:#000;
font-size:12px Arial;
}</script>
<script id="jsbin-source-javascript" 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 - 60; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex });
});
});</script></body>
</html>
Raw
jsbin.camige.css
.tooltip {
display:none;
position:absolute;
border:1px solid #FF0000 ;
background-color:#DDD;
border-radius:5px;
padding:10px;
color:#000;
font-size:12px Arial;
}
Raw
jsbin.camige.js
$(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 - 60; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex });
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment