How do I have Multiple Tooltips for one image

Asked May 06 '14 at 02:41

Active May 06 '14 at 02:41

Viewed 1,356 times

I would like to have three different tooltips appear when I hover over an image without nesting div's.

This code does work:

<div class="col-md-6 col-md-offset-2">
     <div id="tooltip1" data-toggle="tooltip" data-placement="top" title="keyword1" >
     <div id="tooltip2" data-toggle="tooltip" data-placement="left" title="keyword2">
     <div id="tooltip3" data-toggle="tooltip" data-placement="bottom" title="keyword3">
     <img src="/img/600x336.jpg" class="img-responsive" /></div></div></div>
</div>

What I would like to do is something like this with "data-content" maybe being "id:position:title":

<div id="tooltips1" data-toggle="tooltip" data-content="tip1,top,keyword1:tip2,left,keyword2:etc;">
    <img src="img/600x336.jpg" />
</div>

Reference: Bootstrap control with multiple "data-toggle"

Does anyone have any ideas? I'm using Bootstrap 3.1.1 and my javascript is very limited.

edited May 23 '17 at 12:20

Community

asked May 06 '14 at 02:41

Cheyney

What is wrong with the earlier approach? – callmekatootie May 06 '14 at 06:51
In webkit browsers the tooltips are grouping wrong and in firefox they pay no attention to bottom-left or top-left or any diagonal positioning. – Cheyney May 10 '14 at 02:07

How do I have Multiple Tooltips for one image

0 Answers0