在引导程序中对同一元素使用两个数据切换

Question

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?

Answer 1

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.