LiteTooltip.js Examples

Responsive Jquery Tooltip with Valid HTML5 and CSS3 | Smarter Code for Faster Development | Responsive & Interactive Web designs

"The First Fully Responsive ToolTip Bundle with 12 Positions, Customizable Color Presets
Menu Templates, Image Maps, Hotspots, Videos and Triggers"

Download Now »

* WordPress version also available!

Here are some examples of Responsive Menu tooltips which can be implemented using Litetooltip.js jQuery plugin and Bootstrap version 2.x


Move your mouse pointer over the menu items to see the menu tooltips.

HTML Code - responsive nav bar

<ul class="nav-menu-template1">
    <li><a href="#_">Home</a></li>
    <li id="menu_services"><a href="#_">Service <i class="icon-chevron-down icon-white"></i></a></li>
    <li id="menu_media"><a href="#_">Media <i class="icon-chevron-down icon-white"></i></a></li>
    <li class="nav-info" data-title="Click this if you wanna know about us!"><a href="#_">About Us</a></li>
    <li class="nav-info" data-title="For any kind of query kindly contact us."><a href="#_">Contact Us</a></li>
</ul>

CSS

<style type="text/css">
    ul.nav-menu-template1 {
        float: left;
        padding: 0px;
        margin: 0px;
        list-style: none;
    }

        ul.nav-menu-template1 li {
            float: left;
            padding: 0px;
            display: inline;
            margin: 1px;
        }

        ul.nav-menu-template1 a {
            display: block;
            text-align: center;
            text-decoration: none;
            color: #fff;
            min-width: 80px;
            padding: 5px 20px;
            background: #6699cc;
        }

            ul.nav-menu-template1 a:hover {
                background: #0066ff;
            }
</style>

jQuery Code

<script type="text/javascript">
    $('#menu_services').LiteTooltip({
        location: 'bottom-left',
        trigger: 'hoverable',
        textalign: 'left',
        padding: 5,
        margin: 2,
        templatename: "BostonBlue",
        title:
        '<div class="tooltip-menu">' +
        '<ul>' +
        '<li><a href="#"><i class="icon-home"></i> Find a house or flat</a></li>' +
        '<li><a href="#"><i class="icon-road"></i> Find a commercial property</a></li>' +
        '<li><a href="#"><i class="icon-th-list"></i> Find an industrial shed</a></li>' +
        '<li class="last-child"><a href="#"><i class="icon-map-marker"></i> Find a property agent</a></li>' +
        '</ul>' +
        '</div>'
    });

    $('#menu_media').LiteTooltip({
        location: 'bottom-left',
        trigger: 'hoverable',
        textalign: 'left',
        padding: 5,
        margin: 2,
        templatename: "BostonBlue",
        title:
        '<div class="tooltip-menu">' +
        '<ul>' +
        '<li><a href="#"><i class="icon-list"></i> Press Releases</a></li>' +
        '<li><a href="#"><i class="icon-camera"></i> Photo Gallery</a></li>' +
        '<li><a href="#"><i class="icon-facetime-video"></i> Videos</a></li>' +
        '<li class="last-child"><a href="#"><i class="icon-file"></i> Articles</a></li>' +
        '</ul>' +
        '</div>'
    });

    $('.nav-info').LiteTooltip({
        location: 'bottom',
        textalign: 'left'
    });
</script>

Move your mouse pointer over the menu items to see the menu tooltips.

HTML Code - responsive side nav bar

<ul class="nav-sidemenu-template1">
    <li><a href="#_">Home</a></li>
    <li id="sidemenu_cat1"><a href="#_"><i class="icon-chevron-right icon-white"></i>Electronics</a></li>
    <li id="sidemenu_cat2"><a href="#_"><i class="icon-chevron-right icon-white"></i>Clothing</a></li>
    <li id="sidemenu_cat3"><a href="#_"><i class="icon-chevron-right icon-white"></i>Home Furnishing</a></li>
    <li id="sidemenu_cat4"><a href="#_"><i class="icon-chevron-right icon-white"></i>Accessories</a></li>
    <li><a href="#_">Contact Us</a></li>
</ul>

CSS Code

<style type="text/css">
    ul.nav-sidemenu-template1 {
        float: left;
        padding: 0px;
        margin: 0px;
        list-style: none;
    }

        ul.nav-sidemenu-template1 li {
            padding: 0px;
            float: left;
            margin: 1px;
            display: block;
            clear: both;
        }

        ul.nav-sidemenu-template1 a {
            float: left;
            display: inline-block;
            text-decoration: none;
            color: #fff;
            width: 160px;
            padding: 5px 20px;
            background: #df3030;
        }

            ul.nav-sidemenu-template1 a:hover {
                background: #cc0000;
            }

            ul.nav-sidemenu-template1 a i {
                float: right;
                margin-top: 2px;
                margin-right: -6px;
            }
</style>

jQuery Code

<script type="text/javascript">
    $('#sidemenu_cat1').LiteTooltip({
        location: 'right-bottom',
        trigger: 'hoverable',
        textalign: 'left',
        padding: 5,
        margin: 5,
        templatename: "AlizarinCrimson",
        title:
        '<div class="tooltip-menu">' +
        '<ul>' +
        '<li><a href="#">Digital Cameras</a></li>' +
        '<li><a href="#">HD LED TVs</a></li>' +
        '<li><a href="#">Mobile Phones</a></li>' +
        '<li class="last-child"><a href="#">MP3 Players</a></li>' +
        '</ul>' +
        '</div>'
    });

    $('#sidemenu_cat2').LiteTooltip({
        location: 'right-bottom',
        trigger: 'hoverable',
        textalign: 'left',
        padding: 5,
        margin: 5,
        templatename: "AlizarinCrimson",
        title:
        '<div class="tooltip-menu">' +
        '<ul>' +
        '<li><a href="#">Women\'s shoes</a></li>' +
        '<li><a href="#">Shoes</a></li>' +
        '<li class="last-child"><a href="#">Handbags</a></li>' +
        '</ul>' +
        '</div>'
    });

    $('#sidemenu_cat3').LiteTooltip({
        location: 'right-bottom',
        trigger: 'hoverable',
        textalign: 'left',
        padding: 5,
        margin: 5,
        templatename: "AlizarinCrimson",
        title:
        '<div class="tooltip-menu">' +
        '<ul>' +
        '<li><a href="#">Furniture</a></li>' +
        '<li><a href="#">Furnishings</a></li>' +
        '<li><a href="#">Appliances</a></li>' +
        '<li class="last-child"><a href="#">Kitchen Appliances</a></li>' +
        '</ul>' +
        '</div>'
    });

    $('#sidemenu_cat4').LiteTooltip({
        location: 'right-bottom',
        trigger: 'hoverable',
        textalign: 'left',
        padding: 5,
        margin: 5,
        templatename: "AlizarinCrimson",
        title:
        '<div class="tooltip-menu">' +
        '<ul>' +
        '<li><a href="#">Jewelry</a></li>' +
        '<li><a href="#">Watches</a></li>' +
        '<li class="last-child"><a href="#">Sunglasses</a></li>' +
        '</ul>' +
        '</div>'
    });
</script>


Click the button to open the menu tooltip.

HTML Code - bootstrap button

<button id="menu_social" 
    class="btn btn-success" 
    type="button">
    <i class="icon-share icon-white"></i>Share it
</button>

CSS Code

<style type="text/css">
    [class^="social-icon-"],
    [class*="social-icon-"] {
        width: 16px;
        height: 16px;
        display: inline-block;
        line-height: 16px;
        vertical-align: text-top;
    }

    .social-icon-digg {
        background: url(../images/social/digg.png) no-repeat;
    }

    .social-icon-facebook {
        background: url(../images/social/facebook.png) no-repeat;
    }

    .social-icon-twitter {
        background: url(../images/social/twitter.png) no-repeat;
    }

    .social-icon-stumbleupon {
        background: url(../images/social/stumbleupon.png) no-repeat;
    }
</style>

jQuery Code

<script type="text/javascript">
    $('#menu_social').LiteTooltip({
        location: 'right-bottom',
        trigger: 'click',
        textalign: 'left',
        padding: 5,
        templatename: "PaleConifer",
        title:
        '<div class="tooltip-menu">' +
        '<ul>' +
        '<li><a href="#"><i class="social-icon-facebook"></i> Like it!</a></li>' +
        '<li><a href="#"><i class="social-icon-twitter"></i> Tweet it!</a></li>' +
        '<li><a href="#"><i class="social-icon-stumbleupon"></i> Stumble it!</a></li>' +
        '<li class="last-child"><a href="#"><i class="social-icon-digg"></i> Digg it!</a></li>' +
        '</ul>' +
        '</div>'
    });
</script>
You liked it
Download Now »