This is the minimum markup required for this popover implementation.
<div data-has-popover="open">
Some content
<div class="popover">
<div class="popover_content">
popover
</div>
</div>
</div>You can also add a colorbar in two steps.
- add
<div class="popover_colorbar"></div>as the first-child of your.popover - add the data-attribute
data-popover="colorbar"to your.popover
Here's an example.
<div data-has-popover="open">
trigger content
<div class="popover" data-popover="colorbar">
<div class="popover_colorbar"></div>
<div class="popover_content">
popover content
</div>
</div>
</div>Depending on the color you're using, you might need to add contrast to the
popover border. add the data-attribute dark-border for that.
<div class="popover" data-popover="colorbar dark-border">
...
</div>Just hit me up: @chantastic.