Things it does:
- a tooltip on hover
- hide on mouseout
- hide if you hover the tip itself
- unobtruscive javascurpt
Configuration:
- Edit the source code you pansy
<div data-title="oh hey look extra information, this is so great!" data-toggle="tooltip"> | |
cryptic message | |
</div> |
.tooltip { | |
display: none; | |
position: absolute; | |
background: rgba(51,51,51,0.92); | |
color: #eee; | |
font-size: 14px; | |
padding: 0.5em 1em; | |
box-sizing: border-box; | |
text-align: center; | |
} |
tip = $("<div class='tooltip'>") | |
tip.hover -> tip.hide() | |
$.fn.tooltip = -> | |
$.each this, -> | |
$el = $(this) | |
$el.mouseover -> | |
tip.text $el.data('title') | |
tip.show() | |
tip.css( | |
left: $el.offset().left | |
top: $el.offset().top - tip.outerHeight() | |
width: $el.outerWidth() | |
) | |
$el.mouseleave -> tip.hide() | |
$ -> | |
tip.appendTo("body") | |
$("[data-toggle='tooltip']").tooltip() |