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

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

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?

Answers:

I found the issue:

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

Thats all.

Questions:
Answers:

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

Questions:
Answers:

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

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

Questions:
Answers:

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

Questions:
Answers:

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();

Questions:
Answers:

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>