How to set multiple data-toggle for a link in bootstrap?

Question

I have a link and I want to set a bootstrap tooltip for it and aI want it to show a bootstrap modal too. To show a modal the code is this:

<a href="#myModal" role="button" data-toggle="modal">Show</a>

And the following would make a bootstrap tooltip:

<a data-placement="right" data-toggle="tooltip" rel="tooltip" data-original-title='Hello' href="#"></a>

Now how to combine it.Combine means having a link that shows modal and has a bootstrap tooltip too?

Answer 1

I found the issue:

<a href="#myModal" role="button" data-toggle="modal" rel="tooltip" data-original-title='Hello'>Show</a>

Thats all.

Answer 2

I would rather use a wrapping element like this:

<span data-placement="right" data-toggle="tooltip" title="Hello">
    <a href="#myModal" role="button" data-toggle="modal">Show</a>
</span>

This seems more straightforward to me. See this bootply: http://www.bootply.com/zqJRSAjSuQ

Answer 3

you dont need use data-toggle for tooltip, you can change to you want, like data-tt for example:

<a href="#myModal" role="button" data-toggle="modal" data-tt="tooltip" title="hi">Show</a>

And initialize in javascript:

$("[data-tt=tooltip]").tooltip();

JsFiddle

Answer 4

U may also need to to initialize it : I needed to initialize it at bottom of page.

        $("[rel='tooltip']").tooltip();

Answer 5

Add a data attribute to the element:

<a data-toggle="modal" data-hover="tooltip" title="Click to Open" data-placement="right" href="#"></a>

And initialize in javascript:

$("[data-hover='tooltip']").tooltip();

Answer 6

You might want to consider using a div instead of a span element when the tooltip is misplaced ...

Based on F.L.'s answer, this worked for me:

<div data-placement="right" data-toggle="tooltip" title="Hello">
    <a href="#myModal" role="button" data-toggle="modal">Show</a>
</div>