tinytooltip.js Plugin v3.0

Positions

top-left	top	top-right
left-top		right-top
left		right
left-bottom		right-bottom
bottom-left	bottom	bottom-right

Usage

You can specify the different data-placement attribute values to set the tooltip positions around the target element.

HTML

<a href="#_" 
      data-title="sample tooltip text here" 
      data-placement="right">
      link text
</a>
                        

JavaScript

<script type="text/javascript">
    // call plugin method using element selector
    // to attach the tooltip
    $("a").tinytooltip(); 
</script>
                    

Color Presets

Usage

You can specify the different data-backcolor, data-textcolor and data-bordercolor attribute values to change the background, font and border color of tooltip wrapper.

HTML

<a href="#" 
      data-backcolor="#ffcc99" 
      data-textcolor="#333333" 
      data-bordercolor="#cc9999"
      data-title="sample tooltip text" 
      data-placement="right">
      target element
</a>
                        

JavaScript

<script type="text/javascript">
    // call plugin method using element selector
    // to attach the tooltip
    $("a").tinytooltip();
</script>
                    

Alternatively, you can also set the backcolor, textcolor and bordercolor options in the jQuery method:

<script type="text/javascript">
    $("a").tinytooltip({ 
        backcolor: "#ffcc99", 
        textcolor: "#333333", 
        bordercolor: '#cc9999' 
    });
</script>
                    

Skin Presets

Usage

You can specify the data-skin attribute value to change the background, font and border color of tooltip wrapper.

HTML

<a href="#" 
      data-skin="PacificBlue"
      data-title="sample tooltip text" 
      data-placement="right">
      target element
</a>
                        

JavaScript

<script type="text/javascript">
    // call plugin method using element selector
    // to attach the tooltip
    $("a").tinytooltip();
</script>
                    

Alternatively, you can also set the skin option in the jQuery method:

<script type="text/javascript">
    $("a").tinytooltip({ 
        skin: 'PacificBlue' 
    });
</script>
                    

Menus

Usage

You can use the title option in jQuery method to set the tinytooltip menu template. It renders the menu type tooltip with multiple clickable link items.

tinytooltip Menu Template

Following template can be used to create the menu type tooltip

<div class="tinytooltip-menu">
    <ul>
        <li><a href="#">sample list item 1 text</a></li>
        <li><a href="#">sample list item 2 text</a></li>
        <li class="last-child"><a href="#">sample list item 3 text</a></li>
    </ul>
</div>
                        

HTML

<a href="#" 
      data-skin="PacificBlue">
      target element
</a>
                        

JavaScript

<script type="text/javascript">
    $("a").tinytooltip({ 
        html: true,
        placement: 'right auto',
        trigger: 'hoverable',
        delay: { hide: 400 },
        padding: 4,
        title:
            '<div class="tinytooltip-menu">' +
            '<ul>' +
            '<li><a href="#">sample list item 1 text</a></li>' +
            '<li><a href="#">sample list item 2 text</a></li>' +
            '<li class="last-child"><a href="#">sample list item 3 text</a></li>' +
            '</ul>' +
            '</div>'
    });
</script>
                    

Popovers

Usage

You can use the data-action="popover" in HTML code or action: 'popover' option in jQuery method to set the tinytooltip behaviour and style as popover.

HTML

<a href="#" 
      data-skin="PacificBlue">
      target element
</a>
                        

JavaScript

<script type="text/javascript">
    $("a").tinytooltip({ 
        html: true,
        action: 'popover',
        placement: 'right auto',
        trigger: 'hoverable',
        delay: { hide: 400 },
        textalign: 'left',
        title: 'Popover title',
        content: 'And here\'s some amazing content. It\'s very engaging. Right?'
    });
</script>
                    

Image Map Areas

* mouse over the front tyre and headlight to see the preview.

Usage

You can use the following HTML code to create image map areas and attach them to tinytooltip using simple jQuery code.

HTML

<div class="row">
    <div class="col-sm-12" style="overflow-x: auto">
        <img usemap="#car-image-map" src="assets/images/jaguar-image-map-hotspots.jpg" />
        <map name="car-image-map" id="car-image-map">
            <area id="area1" shape="rect" coords="315, 185, 415, 225" href="#" alt="LED Headlights" />
            <area id="area2" shape="circle" coords="285, 255, 45" href="#" alt="Alloy Wheels" />
        </map>
    </div>
</div>
                        

JavaScript

<script type="text/javascript">
    $("#car-image-map #area1").tinytooltip({
        html: true,
        trigger: 'hover',
        placement: "top auto",
        skin: 'PacificBlue',
        border: false,
        title: '<p class="light">LED headlights featuring LED \'J\' blade Daytime Running Lights.</p>'
    });
</script>
                    

Image Hotspots

Usage

You can use the following HTML code to create responsive image hotspots and attach them to tinytooltip using simple jQuery code.

HTML

<div style="max-width: 600px; position: relative;">
    <img class="img-responsive" id="car-image-hotspots" src="assets/images/jaguar-image-map-hotspots.jpg" />
    <div id="hotspot1" class="hotspot" style="border: solid 10px #cc0000; border-radius: 100%; position: absolute; left: 46.2%; top: 60.5%"></div>
    <div id="hotspot2" class="hotspot" style="border: solid 10px #cc0000; border-radius: 100%; position: absolute; left: 60.5%; top: 49.8%"></div>
</div>        
                        

You can use hotspot CSS class for adding the blink effect to hotspot marks on image.

JavaScript

<script type="text/javascript">
    $("#hotspot1").tinytooltip({
        html: true,
        trigger: 'hover',
        placement: "top auto",
        skin: 'PersianRed',
        border: false,
        title: '<p class="light">LED headlights featuring LED \'J\' blade Daytime Running Lights.</p>'
    });
</script>
                    

Image Templates

Usage

You can use the title option in jQuery method to set the tooltip image template or content option to set the popover image template. It renders the HTML template in tooltip/popover container.

Template

Following template can be used to create the image tooltip/popover using HTML code.

<p class="light">
    <img src="assets/images/eagle.jpg" class="image-left" /> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Donec elementum consectetur felis non viverra.
</p>
                        

You can use the image-left and image-right CSS class for img tag to align the image in tooltip/popover content. light or dark CSS class can be used with p tag in above image template to set the predefined dark/light font and background of image template.

HTML

<a id="image-left-1" href="#">
      target element
</a>
                        

JavaScript

<script type="text/javascript">
    $("#image-left-1").tinytooltip({
        textalign: 'left',
        trigger: 'hover',
        placement: "right auto",
        padding: 5,
        html: true,
        skin: 'PacificBlue',
        border: false,
        title:
            '<p class="light"><img src="assets/images/eagle.jpg" class="image-left" /> ' +
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
            'Donec elementum consectetur felis non viverra.</p>'
    });

    $("#image-left-2").tinytooltip({
        textalign: 'left',
        trigger: 'hover',
        action: 'popover',
        placement: "right auto",
        html: true,
        skin: 'PacificBlue',
        title: 'Heading',
        content:
            '<p class="light"><img src="assets/images/eagle.jpg" class="image-left" /> ' +
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
            'Donec elementum consectetur felis non viverra.</p>'
    });
</script>
                    

Video Tooltips

Usage

You can use the title option in jQuery method to set the responsive tooltip video template or content option to set the popover video template.

Video Template

Following template can be used to create the video tooltip/popover using HTML code.

<div class="video-wrapper">
    <iframe src="VIDEO URL HERE" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
                        

HTML

<a id="video-tooltip-1" href="#">
      target element
</a>
                        

JavaScript

<script type="text/javascript">
    $('#video-tooltip-1').tinytooltip({
        placement: 'right auto',
        html: true,
        maxwidth: 340,
        trigger: 'hoverable',
        title: '<div class="video-wrapper"><iframe src="https://www.youtube.com/embed/hA6hldpSTF8" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>'
    });  

    $('#video-popover-1').tinytooltip({
        placement: 'right auto',
        action: 'popover',
        html: true,
        maxwidth: 340,
        trigger: 'hoverable',
        title: 'Video Popover',
        container: 'body',
        content: '<div class="video-wrapper"><iframe src="https://www.youtube.com/embed/hA6hldpSTF8" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>'
    }); 
</script>
                    

AJAX Loading

Usage

You can use a set of AJAX option to implement the dynamic content loading. Here you can use cache, ajax, loading, error, ajaxURL, params, method options to load the dynamic content using AJAX callback.

HTML

<a id="ajax-tooltip" href="#">
      target element
</a>
                        

JavaScript

<script type="text/javascript">
    $('#ajax-tooltip').tinytooltip({
        trigger: 'hoverable',
        placement: 'top-left auto',
        delay: { show: 0, hide: 1000 },
        skin: 'NavyBlue',
        textalign: 'left',
        opacity: 1,
        html: true,
        cache: false,
        ajax: true,
        loading: '<i class="fa fa-spinner fa-spin"></i> loading...',
        error: '<i class="fa fa-exclamation-circle"></i> error occurred',
        ajaxUrl: 'ajax/data.php',
        params: { id: 1, action: 'create' },
        method: 'GET',
        shadow: false,
        width: 300,
        maxwidth: 300
    });
</script>
                    

Event Triggers