README.md

Micro Tooltip

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

example.html

<div data-title="oh hey look extra information, this is so great!" data-toggle="tooltip">
  cryptic message
</div>

tooltip.css.scss

.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;
}

tooltip.js.coffee

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()