Many of Twitter Bootstrap’s JavaScript components rely on HTML data attributes for configuration or triggering. For example, the Modal component requires you set data-toggle="modal" on the element, usually a button, that will trigger the modal being displayed. This is all well and good until you want to have one HTML element be the trigger for two different components.

For example, I had a <button> that triggered a Modal. I also wanted to apply a Popover to the <button> to act as a notification. This presented a problem because you can’t apply multiple data-toggle attributes to an element. You also (currently) can’t give it multiple values, such as data-toggle="modal popover". However, at least for this example, I was able to find a workaround.

First, I setup a <button> to trigger the Modal. Next, I wrapped the <button> in a <span> that would be the target of the Popover. This way, the popover would appear under the <button>, as desired, while still allowing the Modal to be triggered. Lastly, I added a bit of JavaScript to show the popover by default, allowing for the desired notification behavior.

Here’s an example in action:

Many of Twitter Bootstrap’s JavaScript components rely on HTML data attributes for configuration or triggering. For example, the Modal component requires you set data-toggle="modal" on the element, usually a button, that will trigger the modal being displayed. This is all well and good until you want to have one HTML element be the trigger for two different components.

For example, I had a <button> that triggered a Modal. I also wanted to apply a Popover to the <button> to act as a notification. This presented a problem because you can’t apply multiple data-toggle attributes to an element. You also (currently) can’t give it multiple values, such as data-toggle="modal popover". However, at least for this example, I was able to find a workaround.

First, I setup a <button> to trigger the Modal. Next, I wrapped the <button> in a <span> that would be the target of the Popover. This way, the popover would appear under the <button>, as desired, while still allowing the Modal to be triggered. Lastly, I added a bit of JavaScript to show the popover by default, allowing for the desired notification behavior.

Here’s an example in action: