TippyJS Prototype

by Travis

HTML

<div id="linkBox">
  <a href="#" class="tippy" title="Link One Title" rel="tippy">Link One</a>
  <a href="#" class="tippy" title="Link Two Title" rel="tippy">Link Two</a>
  <a href="#" class="tippy">Link Three</a>
</div>

CSS

#linkBox {margin:75px 0px 0px 0px;}
.tippy {padding:10px; display:block; float:left; position:relative;}
.tippyBubble {font-size:0.75em; padding:10px; background:#eee; border-radius:5px; position:absolute; left:0; bottom:0px; opacity:0;}

JavaScript

// 1. Find all links with .tippy class and store/cache in variable.

// 2. Loop through each link with .tippy class.

// 3. If title attribute exists, generate HTML for tip.

// Cache Tippy Elements
var tippies = $('.tippy');

// Sniff & Generate HTML
tippies.each(function(index){
  if($(this).attr('rel') == 'tippy') {
    $(this).prepend('<span class="tippyBubble">' + $(this).attr('title') + '</span>');
    //console.log($(this).attr('title'));
  }
});

tippies.hover(function() {
  $(this).find('.tippyBubble').animate({
    bottom:'+=30px',
    opacity: '1'
  }, 300);
}, function () {
  $(this).find('.tippyBubble').animate({
    bottom:'0px',
    opacity:'0'
  }, 300);
});