Skip to content

Instantly share code, notes, and snippets.

@ivanrosolen

ivanrosolen/ellipsis tooltip

Last active October 14, 2015 21:53
Show Gist options
  • Save ivanrosolen/9ca3733524d8853eee8c to your computer and use it in GitHub Desktop.
Save ivanrosolen/9ca3733524d8853eee8c to your computer and use it in GitHub Desktop.
Download ZIP
ellipsis tooltip
Raw
ellipsis tooltip
<html>
<body>
<style type="text/css">
.ivan {
text-overflow: ellipsis;
width: 200px;
white-space: nowrap;
overflow: hidden;
}
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
</style>
<div id="teste" title="Texto muito grande bad ass from hell" class="ivan showTooltip">
Texto muito grande bad ass from hell
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.showTooltip').hover(function(){
$('<p class="tooltip"></p>')
.text($(this).attr('title'))
.appendTo('body')
.fadeIn('slow');
}, function() {
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX;
var mousey = e.pageY;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment