Jtip 2011

jtip.css.scss

#jtip {
  z-index: 11;
  position: absolute;
  max-width: 200px;
  .arrow {
    position: absolute;
    top: 0px;
    width: 0;
    height: 0;
    margin: 0;
    border-width: 10px;
    border-top-width: 0px;
    border-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: black; }
  .message {
    position: relative;
    top: 10px;
    margin: 0px;
    padding: 4px;
    font-size: 14px;
    color: white;
    border-color: black;
    text-shadow: 0 0 2px black;
    padding: 4px 8px;
    background-color: rgb(25, 25, 25);
    background-color: rgba(25, 25, 25, 0.92);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(black));
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 0 3px #555555;
    -webkit-box-shadow: 0 0 3px #555555;
    -moz-box-shadow: 0 0 3px #555555; } }

jtip.html.haml

%a.jtip.btn.btn-success{'data-title' => 'This is a Jtip tooltip!'} This could be anything.

jtip.js.coffee

$document =  $(document)

@Jtip =
  winWidth: 1024
  $document:  $document

  normal: -> Jtip.start(300)
  delayed: -> Jtip.start(1100)

  start: (delay) ->
    Jtip.$document.ready ->
      Jtip.$jtip = $("<div id=\"jtip\"><div class=\"arrow\"/><div class=\"message\"/></div>").hide().appendTo("body")
      Jtip.$arrow = Jtip.$jtip.find("div.arrow")
      Jtip.$message = Jtip.$jtip.find("div.message")
      $document.on 'mouseenter.jtip', ".jtip", (e) ->
        Jtip.$tipped = $(this)
        Jtip.$message.html Jtip.$tipped.attr("data-title")
        unless Jtip.$jtip.is(":visible")
          Jtip.show_tip = window.setTimeout(->
            Jtip.winWidth = Jtip.$document.width()
            Jtip.$jtip.fadeIn "fast"
          , delay)
        e.stopPropagation()
      $document.on "mousemove", '.jtip', (e) ->
        Jtip.set_pos e
      $document.on "mouseleave", '.jtip', (e) ->
        Jtip.off()
      $document.on "click", '.jtip', (e) ->
        Jtip.off()

  off: ->
    if Jtip.$jtip.is(":visible")
      Jtip.$jtip.hide()
    else
      window.clearTimeout Jtip.show_tip

  set_pos: (e) ->
    width = Jtip.$document.width()
    if e.pageX > (width - 200)
      Jtip.$arrow.css
        right: "3px"
        left: "auto"

      Jtip.$jtip.css
        top: e.pageY + 20
        left: "auto"
        right: width - e.pageX
    else
      Jtip.$arrow.css
        left: "3px"
        right: "auto"

      Jtip.$jtip.css
        top: e.pageY + 20
        left: e.pageX
        right: "auto"

start.js

$(document).ready( Jtip.normal )
/* $(document).ready( Jtip.delayed )   */ /* for delayed tooltips */