Tooltip

by AJIEKCEU

HTML

<div class="container">

        
        
        <section id="examples">
            <h2>A Few of the Options</h2>
            <div class="example">
                <div class="test tooltip-example-1" title="These are the default settings! :)">Default Settings</div>
                <div class="code">
                    <pre class="prettyprint">
$('.tooltip-example-1').tooltipster();
                    </pre>
                </div>
            </div>
            <div class="example">
                <div class="test tooltip-example-2" title="<img src='images/cookie.png' width='50' height='50' align='left' />Set a <u>fixed width</u> or use a <u>fluid width</u> that will automatically expand with your content, choose from <u>six different positions</u>, and <u>add your own classes</u> for multiple tooltip styles. ">Fixed Width + Position + Custom Style</div>
                <div class="code">
                    <pre class="prettyprint">
$('.tooltip-example-2').tooltipster({
    fixedWidth: 400,
    position: 'bottom-left',
    tooltipTheme: '.tooltip-custom-2'
});
                    </pre>
                </div>
            </div>
            <div class="example last">
                <div class="test tooltip-example-3" title="Add a <u>delay</u> before the tooltip displays, have the tooltip <u>follow the mouse</u>, and add a <u>timer</u> that will hide the tooltip after hovering for a set time.">Delay + Mouse Tracking + Timer</div>
                <div class="code">
                    <pre class="prettyprint">
$('.tooltip-example-3').tooltipster({
    arrow: false,
    delay: 500,        
    followMouse: true,
    position: 'top-right',
    timer: 8000,
    tooltipTheme: '.tooltip-custom-3'
});
                    </pre>
                </div>
            </div>
            <div class="clear"></div>
        </section>
        
    </div>

CSS

/* Main */

#tooltip-text-saver {
    position: fixed;
    top: 0px;
    left: 0px;
    color: #fff;
    z-index: 99999999;
}

body {
    background-color: #fff;
    color: #333333;
    font-family: 'Open-Sans', sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 300;
}
.container {
    width: 978px;
    margin: 0 auto;
}
header {
    padding: 15px 0px;
    margin: 100px 0px 30px;
    border-bottom: 1px dashed #dfe2e4;
    position: relative;
}
#beta {
    position: absolute;
    font-size: 10px;
    line-height: 10px;
    color: #409cf2;
    top: 18px;
    left: 170px;
    font-weight: 700;
    text-transform: uppercase;
}
#social {
    width: auto;
    height: 36px;
    background-color: #f3f4f4;
    border: 1px solid #dfe2e4;
    border-radius: 3px;
    position: absolute;
    right: 0px;
    top: 30px;
}
#social div {
    float: left;
    width: 90px;
    padding: 6px 10px;
}
#tweet {
    margin-top: 2px;
}
div#github {
    position: relative;
    bottom: 2px;
    margin-left: 22px;
    width: 110px;
}
#github a {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}
section {
    padding-top: 100px;
}
#intro {
    padding-top: 0px;    
}
nav {
    margin-bottom: 30px;
    width: 100%;
    background-color: #628192;
    position: fixed;
    top:0px;
    z-index: 9999;
    box-shadow: 0px 30px 30px #fff, 0px 30px 30px #fff;
}
nav ul {
    list-style: none;
    margin-bottom: 0px;
}
nav li {
    float: right;
    display: inline;
}
nav a:link, nav a:visited {
    display: inline-block;
    padding: 20px 30px;
    color: #fff;
    background-color: #628192;
}
nav a:hover, nav a:active {
    color: #409cf2;
    background-color: #fff;
}
#description {
    width: 560px;
    float: left;
    margin-right: 60px;
}
#browser-compatibilty, #download-1 {
    width: 300px;
    float: left;
    text-align: center;
    margin-left: 25px;
}
#download-1 {
    padding-top:...

JavaScript

//Tooltipster 1.2 | 9/15/12 | by Caleb Jacob
(function(a){a.fn.tooltipster=function(b){function d(b){if(c.animation=="slide"){a(b).slideUp(c.speed,function(){a(b).remove();a("body").css("overflow-x","auto")})}else{a(b).fadeOut(c.speed,function(){a(b).remove();a("body").css("overflow-x","auto")})}}var c=a.extend({animation:"fade",arrow:true,arrowColor:"",delay:200,fixedWidth:0,followMouse:false,offsetX:0,offsetY:0,overrideText:"",position:"top",speed:100,timer:0,tooltipTheme:".tooltip-message"},b);return this.hover(function(){if(a(c.tooltipTheme).not(".tooltip-kill").length==1){d(a(c.tooltipTheme).not(".tooltip-kill"));a(c.tooltipTheme).not(".tooltip-kill").addClass("tooltip-kill")}a("body").css("overflow-x","hidden");var b=a(this).attr("title");a(this).attr("title","");a(this).data("title",b);if(a.trim(c.overrideText).length>0){var b=c.overrideText}if(c.fixedWidth>0){var e=' style="width:'+c.fixedWidth+'px;"'}else{var e=""}a('<div class="'+c.tooltipTheme.replace(".","")+'"'+e+'><div class="tooltip-message-content">'+b+"</div></div>").appendTo("body").hide();if(c.followMouse==false){var f=a(window).width();var g=a(this).outerWidth(false);var h=a(this).outerHeight(false);var i=a(c.tooltipTheme).not(".tooltip-kill").outerWidth(false);var j=a(c.tooltipTheme).not(".tooltip-kill").outerHeight(false);var k=a(this).offset();if(c.fixedWidth==0){a(c.tooltipTheme).not(".tooltip-kill").css({width:i+"px","padding-left":"0px","padding-right":"0px"})}function l(){var b=a(window).scrollLeft();if(n-b<0){var d=n-b;n=b;a(c.tooltipTheme).not(".tooltip-kill").data("arrow-reposition",d)}if(n+i-b>f){var d=n-(f+b-i);n=f+b-i;a(c.tooltipTheme).not(".tooltip-kill").data("arrow-reposition",d)}}if(c.position=="top"){var m=k.left+i-(k.left+a(this).outerWidth(false));var n=k.left+c.offsetX-m/2;var o=k.top-j-c.offsetY-10;l();if(k.top-j-c.offsetY-11<0){var o=0}}if(c.position=="top-left"){var n=k.left+c.offsetX;var o=k.top-j-c.offsetY-10;l()}if(c.position=="top-right"){var...