how to use a same button both having tooltip and modal

Topic: how to use a same button both having tooltip and modal

Victor Yan free asked 6 years ago

It seems not possible to make a button to trigger a modal and having the same button with a tooltip.

I've tried to wrap only the button content to trigger the tooltip, but its not the effect i wanted to do.

Instead, the button is inside the wrapper. In the following code, its not possible to hover at the tooltip as the tooltip starts to blink unless the user moves the cursor out of the tooltip area.

<span data-toggle="tooltip" data-placement="bottom" title="Excluir negócios selecionados">
 <a href="" class="btn btn-danger btn-rounded" data-toggle="modal" data-target="#confirmarExclusao" role="button">
 <i class="fa fa-trash mr-1" aria-hidden="true"></i></a></span>

Add comment

Anders Johansson free answered 1 year ago

0 0 Best answer

Thanks,

With some modifications, it works :)

Sincerly

Anders, A Swedish dude

Add comment

Mikołaj Smoleński staff answered 6 years ago

1 0 Best answer

Hello,

That's right, You can't use same button for both having tooltip and modal. I've prepared for You very similar solution, which is working correct:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
 <span data-toggle="modal" data-target="#exampleModal">Tooltip & modal</span>
</button>

Regards

Mikołaj Smoleński staff commented 6 years ago

You also need to change button padding to 0 and then add span padding to make it working fine

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Victor Yan

2Support score
1Questions 0Answers 0Snippets