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
Here’s an example in action:
Subscribe via RSS