Simple Javascript Tooltip object using html5 data-ui-tooltip attribute. View Demo: http://codepen.io/acodesmith/pen/ycoDE

example-tooltip-code.html

<!--This is needed somewhere on the page-->
<!--The JS clones the item, so stack classes as needed-->
<div class="tooltipOuter">
    <div class="tooltipInner"></div>
</div>


<!--Example-->
<div class="icon-help" data-ui-tooltip="Example Text in Tooltip. <br />Example Text on Second Line">?</div>

tooltip.js

var tooltipObj = {
    init: function(){
        this.events();
    },
    events: function(){
        var _this = this;
        $('[data-ui-tooltip]').on('mouseenter',function(e){

            var $el = $(this),
                text = $el.data("ui-tooltip");
            _this.mouseenterEvent(e, text, $el);
        });

        $('[data-ui-tooltip]').on('mouseleave click',function(e){
            _this.mouseleaveEvent(e);
        });
    },
    mouseenterEvent: function(e, text, $el){

        if(typeof text != 'undefined'){

            var tt      = $('.tooltipOuter').clone().addClass("temp"),
                ttCon   = $('.tooltipInner').clone(),
                offset  = $el.offset();

            tt.empty()
                .append(ttCon.html(text))
                .appendTo("body");

            //Calculate after append
            var bWidth  = tt.width() > $el.width() ? tt.width() :  $el.width(),
                lWidth  = tt.width() < $el.width() ? tt.width() :  $el.width(),
                dWidth  = bWidth - lWidth,
                topVal  = (offset.top - tt.height()) - 8,
                leftVal = (offset.left - (dWidth / 2));

            tt.css({
                top:topVal,
                left:leftVal
            }).fadeIn("fast");
        }
    },
    mouseleaveEvent: function(e){
        $('.tooltipOuter.temp').remove();
    }
}

tooltip.min.js

var tooltipObj={init:function(){this.events();},events:function(){var _this=this;$('[data-ui-tooltip]').on('mouseenter',function(e){var $el=$(this),text=$el.data("ui-tooltip");_this.mouseenterEvent(e,text,$el);});$('[data-ui-tooltip]').on('mouseleave click',function(e){_this.mouseleaveEvent(e);});},mouseenterEvent:function(e,text,$el){if(typeof text!='undefined'){var tt=$('.tooltipOuter').clone().addClass("temp"),ttCon=$('.tooltipInner').clone(),offset=$el.offset();tt.empty().append(ttCon.html(text)).appendTo("body");var bWidth=tt.width()>$el.width()?tt.width():$el.width(),lWidth=tt.width()<$el.width()?tt.width():$el.width(),dWidth=bWidth-lWidth,topVal=(offset.top-tt.height())-8,leftVal=(offset.left-(dWidth/2));tt.css({top:topVal,left:leftVal}).fadeIn("fast");}},mouseleaveEvent:function(e){$('.tooltipOuter.temp').remove();}}

tooltips.css

/* ToolTip */
.tooltipOuter {
    -webkit-box-shadow:  2px 2px 3px 0px #292926;
    box-shadow:  2px 2px 3px 0px #292926;
    position: absolute;
    z-index: 5000;
    display:block;
    top:200px;
    left:200px;
    min-width:130px;
    max-width:300px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display:none;
}
.tooltipInner {
    background: #fbdf7b;
    -webkit-box-shadow: inset 2px 2px 3px 0px #b29f58;
    box-shadow: inset 2px 2px 3px 0px #b29f58;
    padding: 0.75em;
    color:#292926;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.tooltipInner::before {
    content: " ";
    display: block;
    background-color: transparent;
    position: absolute;
    bottom: -6px;
    margin: 0 0 0 -10px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fbdf7b;
}