Bootstrap Tooltips

Question

I currently have an img tag that when people hover over it, I want a tooltip to appear. As I understand it, you can only place a tooltip in an 'a' tag, is it possible to surround/encapsulate my img tag in order to do so or does this not work?

e.g.

<li class="list-inline-item">
    <a href="whatever" data-toggle="tooltip" data-placement="auto top" title="Arduino">
        <img src="https://png.icons8.com/color/50/000000/arduino.png">
    </a>
</li>

Please! check this: https://stackoverflow.com/questions/11716916/tooltip-on-image — Utkarsh Dubey, Oct 12 '18 at 11:37
that's for a normal tooltip, i'm trying to get a bootstrap tooltip to work but thanks for the link. — aidan22, Oct 12 '18 at 12:17

score 2 · Answer 1 · answered Oct 12 '18 at 11:42

2

Well this works.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
   <img src="https://png.icons8.com/color/50/000000/arduino.png">
</span>

A tooltip doesn't have to be in an 'a' tag.

Dont forget to add:

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

See the bootstrap documentation

answered Oct 12 '18 at 11:42

Tom

495
3
14

great, can i add the function into a js file with a jQuery doc onload already? or should i place it at the bottom of my html doc? – aidan22 Oct 12 '18 at 12:03
Yes, you should include it in a file with jquery doc onload, as long as you inlcude this script in your html :) – Tom Oct 12 '18 at 12:08
1

i'm getting this error: Uncaught TypeError: Cannot read property 'indexOf' of undefined at lt (popper.js:629) at Object.onLoad (popper.js:1134) at popper.js:2342 at Array.forEach () at new t (popper.js:2340) at s.T.show (tooltip.js:287) at s.T._enter (tooltip.js:548) at HTMLSpanElement. (tooltip.js:480) at HTMLSpanElement.handle (jquery.min.js:2) at HTMLSpanElement.dispatch (jquery.min.js:2) – aidan22 Oct 12 '18 at 12:16

Bootstrap Tooltips

1 Answers1