How to insert tooltip image by using bootstrap framework to your website

In this post, I will show you how to insert tooltip image by using bootstrap framework to your website. By using simple code, you can insert tooltip image when you hover an element. Do step by step.
Tooltip image with Bootstrap Framework

Step 1: You have to use html code below .tooltip. e.g.



<div class="cart"> 
    <a data-toggle="tooltip" title="<img src='http://getbootstrap.com/apple-touch-icon.png' />">
        <i class="icon-shopping-cart"></i>
    </a>

Step 2: Using Javascript

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
    html: true
});

Step 3: Using CSS for icon

.cart {
    overflow:hidden;
    padding:10px 3px;
    background: yellow;
}

Thanks for reading.

Share this :

No comments yet.

Leave a Reply

Related post

Free Responsive Website templates

ThemeVina is Best site for free sharing and download Wordpress themes, Joomla templates, Responsive website templates and more HTML templates.

All template in Site are free. You can download and install for your site.

Contact us

  • Brand: Theme Vina
  • Email: admin@themevina.com
  • Website: www.themevina.com
  • Address: 367 Tran Hung Dao Street
  • Location: Thai Binh City, Thai Binh, Viet Nam

Newsletter