article:
Elements Design: 208 Reflection Icons for mobile apps and websites
article:
JS Plugin: equalize

JS Plugin: Tooltipster

Advertisement

"Tooltipster is a lightweight jQuery plugin that enables you to easily create clean, HTML5 validated tooltips."


Usage

Load jQuery and include Tooltipster's plugin files

<head>
...
    <linkrel="stylesheet"type="text/css"href="css/tooltipster.css"/><scripttype="text/javascript"src="http://code.jquery.com/jquery-1.8.0.min.js"></script><scripttype="text/javascript"src="js/jquery.tooltipster.min.js"></script>
...
</head>

Set up your HTML
<imgsrc="my-image.png"class="tooltip"title="This is my image's tooltip message!"/>
or
<ahref="http://calebjacob.com"class="ketchup tooltip"title="This is my link's tooltip message!">Link</a>
or
<divclass="tooltip"title="This is my div's tooltip message!"><p>This div has a tooltip when you hover over it!</p></div>

Activate Tooltipster
<head>
...
    <script>
        $(document).ready(function(){
            $('.tooltip').tooltipster();});</script></head>

Customizing Tooltipster

HTML code
<a href="#" class="tooltip" title="<imgsrc='my-image.png'width='100'height='100'/> Here is an image and <b>bold text!</b>">Link</a>

CSS code
.my-custom-theme {position: absolute;text-align: center;z-index:9999999;pointer-events: none;width: auto;/* Start styling here... */}

jQuery code
$('.tooltip').tooltipster({
    tooltipTheme:'.my-custom-theme'});
or
$('.tooltip').tooltipster({
    animation:'slide',// Default: fade
    arrow:true,// Default: true
    arrowColor:'',// Default: tooltip's background color
    delay:200,// Default: 200
    fixedWidth:400,// Default: 0
    followMouse:true,// Default: false
    offsetX:0,// Default: 0
    offsetY:0,// Default: 0
    overrideText:'',// Default: ''
    position:'bottom-right',// Default: top
    speed:500,// Default: 100
    timer:1000,// Default: 0
    tooltipTheme:'.my-custom-theme'// Default: '.tooltip-message'});


Screenshots

Plugin: Tooltipster

Plugin: Tooltipster

Plugin: Tooltipster



Feature

- Supports HTML tags inside the tooltip
- Lightweight and degradable
- Extremely flexible & fast to set up
- Easily styled with 100% CSS - no images needed
- Plays nicely with IE



source
sample
github
download

Advertisement
Tags: tooltip, plugin, jquery, web, develop, design, layout, website, link, html5

Leave a Comment

No Comment

© Creative3x Ltd.