I have the following code, which show up fine:
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Message">
<img src="~/Content/images/trackerBlack.png" />
</a>
I need to get it to work with the following:
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
<img src="~/Content/images/trackerBlack.png" />
<span class="badge notificationeyebrow">
0
</span>
</a>
Not sure how to get it to work within an anchor tag.
The easiest way to achieve this would be to add a wrapper. The approach for where/how you would add the wrapper is mostly personal preference but the way I would do it is to change your
dropdown-toggle
from a hyperlink to adiv
, and move the hyperlink inside the newly-created wrapper:In this fashion you're going to retain all of the desired structure... your
dropdown-toggle
will still function, and the area that houses your tooltip will still behave like a hyperlink. You could handle this in other ways though... for example you could leave your hyperlink as you already have it, and create a<div>
inside the hyperlink that houses your tooltip wrapper.