Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image in tooltip using bootstrap?

<button title="Tooltip on right" data-placement="right" data-toggle="tooltip" class="btn btn-default mrs" type="button">Tooltip on right</button>


<script>
  $(function () {
    $('[data-toggle=tooltip]').tooltip();
  });
</script>

This works fine but I'd like to include an image and some text inside the tooltip. I tried to use data-content="some stuff" but it shows nothing.

like image 242
dkx22 Avatar asked Apr 06 '15 15:04

dkx22


People also ask

Can you put an image in a tooltip?

There is no way to bring images directly into a tooltip, but by using custom shapes and a viz in tooltip, we can work around this.

How do I use Bootstrap tooltips?

Tooltips can be enabled via JavaScript — just call the tooltip() Bootstrap method with the id , class or any CSS selector of the target element in your JavaScript code. You can either initialize tooltips individually or all in one go.

How do I show data in tooltip?

Basic Tooltip HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .

How do I enable tooltip in bootstrap 5?

To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with JavaScript to work.


1 Answers

You have to pass in the html option to when you initialize .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>

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

See the example fiddle

like image 116
joshvito Avatar answered Oct 12 '22 10:10

joshvito