Prajwal
Prajwal

Reputation: 4000

Using two data-toggle for same element in bootstrap

I was messing around with Bootstrap and created a page which has a simple navigation menu. I wanted to add modal for one of the links, which already has a tooltip.

And I did add the modal to li like this,

data-toggle="modal" data-target="#SettingsModal" data-toggle="tooltip"

Surprisingly, its working. It doesn't make much sense. Because at least one data-toggle has to be neglected.

I know that it is better to wrap it inside an element which has tooltip. My question is, how is this working?

Upvotes: 1

Views: 2422

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362260

It's working because the Bootstrap data attributes use separate jQuery selectors to "activate" the various components.

Since $('[data-toggle="modal"]') and $('[data-toggle="tooltip"]') are both referenced in the Bootstrap JS code, both modal and tooltip components are working.

Upvotes: 4

Related Questions