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 Image Hotspot tooltips which can be implemented using Litetooltip.js jQuery plugin and Bootstrap version 2.x


Move your mouse pointer over the hotspots to view the tooltip. Click on image to open the tooltip menu.

HTML Code - responsive image & hotspots

<div id="product-iphone" class="imagehotspot-container" style="position: relative; max-width: 258px; /* max-width: actual width of image */ width: 100%; height: auto; z-index: 101;">
    <div style="position: relative; height: 0px; padding-bottom: 86.434%; /* padding-bottom: image's height divided by width multiply by 100 */">
        <img src="../images/iphone.png" style="position: absolute; top: 0px; left: 0px; z-index: 102" />
        <div id="ihotspot1" class="ihotspot" style="position: absolute; z-index: 103; width: 3.875%; height: 4.484%; top: 62.78%; left: 21.3178%;">
        </div>
        <div id="ihotspot2" class="ihotspot" style="position: absolute; z-index: 103; width: 3.875%; height: 4.484%; top: 5.829%; left: 50.3875%;">
        </div>
        <div id="ihotspot3" class="ihotspot" style="position: absolute; z-index: 103; width: 3.875%; height: 4.484%; top: 44.843%; left: 89.922%;">
        </div>
    </div>
</div>

jQuery Code

<script type="text/javascript">
    $(document).ready(function () {
        $(".ihotspot").css({
            "border": "solid 1px #009900",
            "background": "#00ffcc",
            "border-radius": "6px"
        });

        function blink_hotspot() {
            $('.ihotspot').animate({ "opacity": '0.3' }, 'slow').animate({ 'opacity': '0.8' }, 'fast', function () { blink_hotspot(); });
        }

        blink_hotspot();
    });

    $('#ihotspot1').LiteTooltip({
        location: 'right',
        textalign: 'left',
        templatename: 'Limeade',
        padding: 5,
        title:
        '<div class="template">' +
        '<h4>Retina Display</h4>' +
        '<p style="padding: 5px; font-size: 11px; line-height: 18px;">' + 
        '<img src="../images/retina.jpg" style="width: 65px; margin-right: 10px" class="image-left" />' +
        '4-inch (diagonal) widescreen Fingerprint-resistant Multi-Touch display. ' +
        '1136-by-640-pixel resolution at 326 ppi. ' +
        '800:1 contrast ratio (typical). ' +
        '</p>' +
        '</div>'
    });

    $('#ihotspot2').LiteTooltip({
        location: 'right',
        textalign: 'left',
        templatename: 'BostonBlue',
        padding: 5,
        title:
        '<div class="template">' +
        '<h4>Camera, Photos, and Videos</h4>' +
        '<ul style="font-size: 11px; line-height: 20px; padding-bottom: 10px;">' +
        '<li style="float: left; list-style: none;">' +
        '<img src="../images/camera.jpg" style="width: 65px; margin-right: 5px" class="image-left" /></li>' +
        '<li>8 megapixel iSight camera</li>' +
        '<li>Panorama</li>' +
        '<li>Video recording, HD(1080p) up to 30fps</li>' +
        '<li>FaceTime 1.2MP HD(720p) up to 30fps.</li>' +
        '<li>Autofocus</li>' +
        '<li>Tap to focus video or still images</li>' +
        '<li>Face detection in video or still images</li>' +
        '<li>LED flash</li>' +
        '<li>Improved video stabilization</li>' +
        '<li>Photo and video geotagging</li>' +
        '</ul>' +
        '</div>'
    });

    $('#ihotspot3').LiteTooltip({
        location: 'right',
        textalign: 'left',
        templatename: 'PaleMint',
        padding: 5,
        title:
        '<div class="template">' +
        '<h4>Size and Weight</h4>' +
        '<p style="padding: 5px; font-size: 11px; line-height: 20px;">' +
        '<strong>Height:</strong> 4.87 inches (123.8 mm)<br />' +
        '<strong>Width:</strong> 2.31 inches (58.6 mm)<br />' +
        '<strong>Depth:</strong> 0.30 inch (7.6 mm)<br />' +
        '<strong>Weight:</strong> 3.95 ounces (112 grams)' +
        '</p>' +
        '</div>'
    });

    $('#product-iphone').LiteTooltip({
        location: 'right',
        trigger: 'click',
        textalign: 'left',
        padding: 5,
        templatename: "BostonBlue",
        title:
        '<div class="tooltip-menu">' +
        '<ul>' +
        '<li><a href="#"><i class="icon-shopping-cart icon-white"></i> Add to cart</a></li>' +
        '<li><a href="#"><i class="icon-star-empty icon-white"></i> Add to favorites</a></li>' +
        '<li class="last-child"><a href="#"><i class="icon-list-alt icon-white"></i> View Details</a></li>' +
        '</ul>' +
        '</div>'
    });
</script>

Move your mouse pointer over the hotspots to view the different styles of tooltip.

HTML Code - responsive image & hotspots

<div class="imagehotspot-container" style="position: relative; max-width: 600px; /* max-width: actual width of image */ width: 100%; height: auto; z-index: 101;">
    <div style="position: relative; height: 0px; padding-bottom: 81.17%; /* padding-bottom: image's height divided by width multiply by 100 */">
        <img src="../images/kansas-city-us.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 102" />
        <div id="photspot1" style="position: absolute; z-index: 103; width: 3.3%; height: 4.1%; top: 55.44%; left: 36.67%;">
        </div>
        <div id="photspot2" style="position: absolute; z-index: 103; width: 3.3%; height: 4.1%; top: 9.03%; left: 78.33%;">
        </div>
        <div id="photspot3" style="position: absolute; z-index: 103; width: 10%; height: 6.57%; top: 86.24%; left: 23%;">
        </div>
    </div>
</div>

jQuery Code

<script type="text/javascript">
    $(document).ready(function () {
        $("#photspot1").css({
            "border": "solid 1px #990000",
            "background": "#cc0000",
            "border-radius": "6px"
        });

        $("#photspot2").css({
            "border": "solid 1px #000099",
            "background": "#0000cc",
            "border-radius": "6px"
        });

        $("#photspot3").css({
            "border": "solid 1px #eeee00",
            "background": "#aadd00",
            "border-radius": "6px"
        });

        function blink_hotspot() {
            $('#photspot1').animate({ "opacity": '0.3' }, 'slow').animate({ 'opacity': '0.8' }, 'fast', function () { blink_hotspot(); });
            $('#photspot2').animate({ "opacity": '0.3' }, 'slow').animate({ 'opacity': '0.8' }, 'fast', function () { blink_hotspot(); });
            $('#photspot3').animate({ "opacity": '0.3' }, 'slow').animate({ 'opacity': '0.8' }, 'fast', function () { blink_hotspot(); });
        }

        blink_hotspot();
    });

    $('#photspot1').LiteTooltip({
        location: 'top',
        trigger: 'hoverable',
        textalign: 'left',
        padding: 5,
        templatename: "Spindle",
        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>'
    });

    $('#photspot2').LiteTooltip({
        location: 'bottom',
        textalign: 'left',
        templatename: 'Spindle',
        width: 300,
        padding: 5,
        title:
        '<div class="template">' +
        '<h4><i class="icon-plane"></i> Downtown Airport</h4>' +
        '<p>Charles B. Wheeler Downtown Airport just <strong>20 Miles</strong> away from the city center.</p>' +
        '</div>'
    });

    $('#photspot3').LiteTooltip({
        textalign: 'left',
        backcolor: '#7fba00',
        width: 300,
        title: 'Commercial space is available here.'
    });
</script>

Move your mouse pointer over the hotspots to view the tooltip.

HTML Code - responsive image & hotspots

<div class="imagehotspot-container" style="position: relative; max-width: 600px; /* max-width: actual width of image*/ width: 100%; height: auto; z-index: 101; overflow: hidden">
    <div style="position: relative; height: 0px; padding-bottom: 48%; /* padding-bottom: image's height divided by width multiply by 100 */">
        <img style="position: absolute; top: 0px; left: 0px; z-index: 102;" alt="" src="../images/ford-fusion.jpg" />
        <div class="redhotspot" id="fhotspot1" style="position: absolute; z-index: 103; width: 1.667%; height: 3.472%; top: 81%; left: 41.9%;"></div>
        <div class="redhotspot" id="fhotspot2" style="position: absolute; z-index: 103; width: 1.667%; height: 3.472%; top: 47%; left: 42%;"></div>
    </div>
</div>

jQuery Code

<script type="text/javascript">
    $(document).ready(function () {
        $(".redhotspot").css({
            "border": "solid 1px #990000",
            "background": "#cc0000",
            "border-radius": "6px"
        });

        function blink_hotspot() {
            $('.redhotspot').animate({ "opacity": '0.3' }, 'slow').animate({ 'opacity': '0.8' }, 'fast', function () { blink_hotspot(); });
        }

        blink_hotspot();
    });

    $("#fhotspot1").LiteTooltip({
        textalign: "left",
        trigger: "hover",
        templatename: "BostonBlue",
        title:
        '<div class="template">' +
        '<p style="padding: 5px; font-size: 11px; line-height: 20px;">' +
        '<img src="../images/alloy.jpg" class="image-left" style="max-width: 75px; width: 100%;" />' +
        'Take your pick of standard and available wheels on the 2013 Ford Fusion.' +
        '</p>' +
        '</div>'
    });

    $("#fhotspot2").LiteTooltip({
        textalign: "left",
        trigger: "hover",
        templatename: "BostonBlue",
        title:
        '<div class="template">' +
        '<p style="padding: 5px; font-size: 11px; line-height: 20px;">' +
        '<img src="../images/interior-ford.jpg" class="image-left" style="max-width: 200px; width: 100%;" />' +
        'Ambient lighting in the Titanium with cool interior illumination.' +
        '</p>' +
        '</div>'
    });
</script>
You liked it
Download Now »