A Pen by digital-doodle.

Bubble-Point.markdown

Bubble Point

Bubble Point Tooltips by CHRIS COYIER

https://github.com/olivM/BubblePointToolTip

A Pen by digital-doodle on CodePen.

License.

index.html

<div class="column small-centered"> 
<div id="page-wrap" class="columns small-centered large-6">
		
		<h1><span>Bubble Point</span> Tooltips</h1>
		
		<p>Pellentesque habitant morbi tristique <a href="#" title="I ❤ ">senectus</a> et netus et malesuada fames ac <a href="#" title="Hi, I'm a tooltip thingy.">turpis</a> egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat <a href="#" title="Ooooh<br>Look at me<br>I'm a fancy tooltip">eleifend</a> leo.</p>
	
	</div>
  </div>

script.js

$.fn.tooltips = function(el) {

    var $tooltip,
      $body = $('body'),
      $el;

    // Ensure chaining works
    return this.each(function(i, el) {
    
      $el = $(el).attr("data-tooltip", i);

      // Make DIV and append to page 
      var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo("body");

      // Position right away, so first appearance is smooth
      var linkPosition = $el.position();

      $tooltip.css({
        top: linkPosition.top - $tooltip.outerHeight() - 13,
        left: linkPosition.left - ($tooltip.width()/2)
      });

      $el
      // Get rid of yellow box popup
      .removeAttr("title")

      // Mouseenter
      .hover(function() {

        $el = $(this);

        $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']');

        // Reposition tooltip, in case of page movement e.g. screen resize                        
        var linkPosition = $el.position();

        $tooltip.css({
          top: linkPosition.top - $tooltip.outerHeight() - 13,
          left: linkPosition.left - ($tooltip.width()/2)
        });

        // Adding class handles animation through CSS
        $tooltip.addClass("active");

        // Mouseleave
      }, function() {

        $el = $(this);

        // Temporary class for same-direction fadeout
        $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out");

        // Remove all classes
        setTimeout(function() {
          $tooltip.removeClass("active").removeClass("out");
          }, 300);

        });

      });

    }


$(function() {
			$("#page-wrap a[title]").tooltips();
		});

style.scss

@import "compass/css3";
@import "compass/css3/transform";
  
$blue:#3366cc;
$base-font:"Helvetica Neue", Sans-Serif;

.tooltip, .arrow:after {
  background: $blue;
  border: 2px solid white;
}

.tooltip {
  pointer-events: none;
  opacity: 0;
  display: inline-block;
  position: absolute;
  padding: 1.25em;
  color: tint($blue, 90%);
  @include border-radius(20px);
  margin-top: 20px;
  font:{
    weight:bold;
    size:14px;
    family:$base-font;
    stretch:condensed;
  }
  text:{
    align:center;
    decoration:none;
    transform:uppercase;
  }
  @inlude box-shadow(black 0px 0px 7px 7px);
}

.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  @include box-shadow(black 6px 5px 9px -9px);
  @include rotate(45deg);
}

.tooltip.active {
  opacity: 1;
  margin-top: 5px;
   @include transition-property(all);
  @include transition-duration(0.2s);
  @include transition-timing-function(ease);
}
.tooltip.out {
  opacity: 0;
  margin-top: -20px;
}

adding compass mixins to the css