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.