Pop Button
v0.0.0
The Pop Button shows a contextual dialog when a user hovers of clicks (configurable) a control button. It is designed to be generic and applicable to a variety of situations.
<div class="py-40 d-flex justify-content-center">
<div>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-d9946b" aria-expanded="false" id="sg-d9946b-btn" data-pop-button="hover" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover me</button>
<div aria-labelledby="sg-d9946b-btn" class="vi-pop-button__dialog" id="sg-d9946b">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</div>
</div>
<div class="py-40 d-flex justify-content-between">
<div>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-ea3502" aria-expanded="false" id="sg-ea3502-btn" data-pop-button="hover" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover me</button>
<div aria-labelledby="sg-ea3502-btn" class="vi-pop-button__dialog" id="sg-ea3502">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</div>
<div>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-5dd72b" aria-expanded="false" id="sg-5dd72b-btn" data-pop-button="click" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click me</button>
<div aria-labelledby="sg-5dd72b-btn" class="vi-pop-button__dialog" id="sg-5dd72b">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</div>
</div>
<div class="py-40 d-flex justify-content-center">
<div>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-4ce255" aria-expanded="false" id="sg-4ce255-btn" data-pop-button="click" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click me</button>
<div aria-labelledby="sg-4ce255-btn" class="vi-pop-button__dialog" id="sg-4ce255">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</div>
</div>Markup #
Any of the Buttons can be used.
Add data-pop-button="hover" to a button to make it act on hover.
Add data-pop-button="click" to a button to make it act on click.
For accessibility*, also set following attributes tot the button:
aria-has-haspopup="true"aria-controls="{id-of-dialog}"aria-expanded="false"
And set aria-labelledby="{id-of-control-button}" to the dialog.
- If the aria attributes are left out, they will be generated by javascript.
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-21d744" aria-expanded="false" id="sg-21d744-btn" data-pop-button="hover" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Button</button>
<!-- The Dialog -->
<div aria-labelledby="sg-21d744-btn" class="vi-pop-button__dialog" id="sg-21d744">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
<!-- Content of the dialog -->
...
</div>
</div>
</div>Direction and fallback #
The dialog is positioned based on available space. However, some control can exercised by using the
data-pop-button-dialog-placement data attribute. Set its value to top, right, bottom or left. When there is enough space it is displayed in that direction.
Use the data-pop-button-dialog-placement-fallback data attribute to controls fallback directions. The value is a space separated list of the values top, right, bottom or left in any order.
The dialog box will first try to position itself on top. If there's not enough space, it will try the left placement. If left doesn't work either, it will try right. If neither left nor right works, it will go back to the top placement.
<div class="py-80 d-flex justify-content-center">
<div>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-de4967" aria-expanded="false" id="sg-de4967-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover me</button>
<div aria-labelledby="sg-de4967-btn" class="vi-pop-button__dialog" id="sg-de4967">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</div>
</div>Strategy #
The default positioning strategy is absolute.
When the Pop Button is a descendant of an elemement with (implicit) overflow hidden, use the fixed positioning strategy.
Be careful when using the fixed strategy, as it requires adjusting the dialog's position, which might not look smooth.
Use the data-pop-button-dialog-strategy data attribute to change the strategy.
The absolute is not aligned. This example below shows why / when to use the fixed strategy.
On touch devices the hover is 'replaced' by click
<div class="vi-table vi-table-mini">
<div class="vi-table-default__inner vi-table__inner">
<table>
<tr>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-ae9134" aria-expanded="false" id="sg-ae9134-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-ae9134-btn" class="vi-pop-button__dialog" id="sg-ae9134">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-32a5ee" aria-expanded="false" id="sg-32a5ee-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Absolute</button>
<div aria-labelledby="sg-32a5ee-btn" class="vi-pop-button__dialog" id="sg-32a5ee">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-6482be" aria-expanded="false" id="sg-6482be-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-6482be-btn" class="vi-pop-button__dialog" id="sg-6482be">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-3382b0" aria-expanded="false" id="sg-3382b0-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Absolute</button>
<div aria-labelledby="sg-3382b0-btn" class="vi-pop-button__dialog" id="sg-3382b0">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-3738dd" aria-expanded="false" id="sg-3738dd-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-3738dd-btn" class="vi-pop-button__dialog" id="sg-3738dd">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-5ac0ab" aria-expanded="false" id="sg-5ac0ab-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Fixed</button>
<div aria-labelledby="sg-5ac0ab-btn" class="vi-pop-button__dialog" id="sg-5ac0ab">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-31383c" aria-expanded="false" id="sg-31383c-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Absolute</button>
<div aria-labelledby="sg-31383c-btn" class="vi-pop-button__dialog" id="sg-31383c">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-ba2c96" aria-expanded="false" id="sg-ba2c96-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Fixed</button>
<div aria-labelledby="sg-ba2c96-btn" class="vi-pop-button__dialog" id="sg-ba2c96">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-a4254e" aria-expanded="false" id="sg-a4254e-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Absolute</button>
<div aria-labelledby="sg-a4254e-btn" class="vi-pop-button__dialog" id="sg-a4254e">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-4c155d" aria-expanded="false" id="sg-4c155d-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Fixed</button>
<div aria-labelledby="sg-4c155d-btn" class="vi-pop-button__dialog" id="sg-4c155d">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-3b4b54" aria-expanded="false" id="sg-3b4b54-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-3b4b54-btn" class="vi-pop-button__dialog" id="sg-3b4b54">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-722c63" aria-expanded="false" id="sg-722c63-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Absolute</button>
<div aria-labelledby="sg-722c63-btn" class="vi-pop-button__dialog" id="sg-722c63">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-0ac491" aria-expanded="false" id="sg-0ac491-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-0ac491-btn" class="vi-pop-button__dialog" id="sg-0ac491">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-aea8c9" aria-expanded="false" id="sg-aea8c9-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Absolute</button>
<div aria-labelledby="sg-aea8c9-btn" class="vi-pop-button__dialog" id="sg-aea8c9">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-c677b8" aria-expanded="false" id="sg-c677b8-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-c677b8-btn" class="vi-pop-button__dialog" id="sg-c677b8">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-15d832" aria-expanded="false" id="sg-15d832-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Fixed</button>
<div aria-labelledby="sg-15d832-btn" class="vi-pop-button__dialog" id="sg-15d832">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-33c060" aria-expanded="false" id="sg-33c060-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Absolute</button>
<div aria-labelledby="sg-33c060-btn" class="vi-pop-button__dialog" id="sg-33c060">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-6b1ee4" aria-expanded="false" id="sg-6b1ee4-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Fixed</button>
<div aria-labelledby="sg-6b1ee4-btn" class="vi-pop-button__dialog" id="sg-6b1ee4">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-327678" aria-expanded="false" id="sg-327678-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Absolute</button>
<div aria-labelledby="sg-327678-btn" class="vi-pop-button__dialog" id="sg-327678">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-702c3c" aria-expanded="false" id="sg-702c3c-btn" data-pop-button="hover" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover
Fixed</button>
<div aria-labelledby="sg-702c3c-btn" class="vi-pop-button__dialog" id="sg-702c3c">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-2c0495" aria-expanded="false" id="sg-2c0495-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-2c0495-btn" class="vi-pop-button__dialog" id="sg-2c0495">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-276943" aria-expanded="false" id="sg-276943-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Absolute</button>
<div aria-labelledby="sg-276943-btn" class="vi-pop-button__dialog" id="sg-276943">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-59acd5" aria-expanded="false" id="sg-59acd5-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-59acd5-btn" class="vi-pop-button__dialog" id="sg-59acd5">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-ec9a9d" aria-expanded="false" id="sg-ec9a9d-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="absolute" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Absolute</button>
<div aria-labelledby="sg-ec9a9d-btn" class="vi-pop-button__dialog" id="sg-ec9a9d">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
<td>
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-ca4680" aria-expanded="false" id="sg-ca4680-btn" data-pop-button="click" data-pop-button-dialog-placement="top" data-pop-button-dialog-placement-fallback="left right" data-pop-button-dialog-strategy="fixed" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Click
Fixed</button>
<div aria-labelledby="sg-ca4680-btn" class="vi-pop-button__dialog" id="sg-ca4680">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>Add role="menu" to the dialog when it contains menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
(See definition)
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-6b12c0" aria-expanded="false" id="sg-6b12c0-btn" data-pop-button="hover" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Menu</button>
<div aria-labelledby="sg-6b12c0-btn" class="vi-pop-button__dialog" id="sg-6b12c0" role="menu">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
<ul class="mb-0">
<li>
<a href="#link1">Link 1</a>
</li>
<li>
<a href="#link2">Link 2</a>
</li>
<li>
<a href="#link3">Link 3</a>
</li>
</ul>
</div>
</div>
</div>Confirm #
To create a confirm like dialog.
<script>
function doActionAndCloseButton(id) {
$(id).viPopButton("hide");
requestAnimationFrame(() => alert("do something"));
}
</script>
<!-- Pop Button -->
<div class="vi-pop-button" id="sg-b48ebd">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-b48ebd-dialog" aria-expanded="false" id="sg-b48ebd-btn" data-pop-button="click" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Delete Customer</button>
<div aria-labelledby="sg-b48ebd-dialog-btn" class="vi-pop-button__dialog" id="sg-b48ebd-dialog" role="alertdialog">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
<h5>Are you sure?</h5>
<p>You can't undo this action afterwards.</p>
<div class="d-flex justify-content-between">
<!-- Button type: outline -->
<button aria-has-haspopup="true" aria-controls="sg-b48ebd" aria-expanded="false" id="sg-b48ebd-cancel-btn" data-pop-button="click" type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--sm vi-btn">Cancel</button>
<!-- Button type: solid -->
<button onclick="doActionAndCloseButton('#sg-b48ebd');" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--sm vi-btn">Delete</button>
</div>
</div>
</div>
</div>
<!-- / Others left out -->Large #
Use modifier --lg to have a 400px wide content area. On smaller devices it will adjust.
<!-- Pop Button (mods: --lg) -->
<div class="vi-pop-button vi-pop-button--lg">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-e24856" aria-expanded="false" id="sg-e24856-btn" data-pop-button="hover" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover me</button>
<div aria-labelledby="sg-e24856-btn" class="vi-pop-button__dialog" id="sg-e24856">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
<hr>
<!-- Pop Button (mods: --lg) -->
<div class="vi-pop-button vi-pop-button--lg">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-266587" aria-expanded="false" id="sg-266587-btn" data-pop-button="hover" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover me</button>
<div aria-labelledby="sg-266587-btn" class="vi-pop-button__dialog" id="sg-266587">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
<p>Yuccie plaid austin five dollar toast dreamcatcher umami squid. Kale chips lomo tilde flexitarian. Health knausgaard tumblr pinterest pour-over. Flannel yuccie vegan waistcoat vhs hoodie.</p>
</div>
</div>
</div>Mount #
Use the data-pop-button-dialog-mount attribute to mount the dialog to a different element. Use a selector to target the element.
mount point
<!-- Pop Button -->
<div class="vi-pop-button">
<!-- Button type: solid -->
<button aria-has-haspopup="true" aria-controls="sg-75d896" aria-expanded="false" id="sg-75d896-btn" data-pop-button="hover" data-pop-button-dialog-mount="#mountpoint" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Hover me</button>
<div aria-labelledby="sg-75d896-btn" class="vi-pop-button__dialog" id="sg-75d896">
<div aria-hidden="true" class="vi-pop-button__arrow" data-popper-arrow></div>
<div class="vi-pop-button__main">
...
</div>
</div>
</div>
<hr>
<div class="small muted">mount point</div>
<div id="mountpoint" style="width: 50px; height: 50px; border: 1px solid red;"></div>Stylesheets #
The following stylesheets are required to display this component.
The following additional stylesheet is used to display the example(s).
JavaScript #
The following javascript is required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 26 Feb 2025 - feat(pop-button): add
data-mount attribute to mount the dialog to a different element.
- 01 Feb 2024 - Fixed pop button being stuck and not closing on hover in some cases.
- 23 Jan 2024 - Fixed pop button appearing at wrong location for a split second while repositioning.
- 12 Sep 2023 - Firefox fix of content width
- 30 Aug 2023 - Better determination of scrollcontext
- 29 Aug 2023 - Normalize behaviour of click strategy.
- 11 Aug 2023 - Fixed large pop button missing the big pop up when attached to body.
- 31 Jul 2023 - Collapse the dialog width.
- 23 Jun 2023 - Spaghetti fix the dialog positioning on safari (mobile) by forcing fixed strategy en moving the dialog to the body.
- 02 Jun 2023 - Removed
data-pop-button-dialog-placement and data-pop-button-dialog-placement-fallback from the large pop-button example.
- 02 Jun 2023 - Prevent the need of two touches to open the dialog on touch devices when in hover mode.
- 16 May 2023 - Fix width on
--lg modifier.
- 13 Jun 2022 - Fix bug where ‘stem’ fails in certain direction
Added
- 30 Aug 2023 - Close on scroll
- 29 Aug 2023 - Add click outside; Add ony one open.
- 07 Apr 2023 - Add
--lg modifier for a large size dialog area.
- 07 Apr 2023 - Add
data-pop-button-dialog-strategy to control the mount strategy of the dialog.
- 05 Apr 2023 - Add
data-pop-button-dialog-placement and data-pop-button-dialog-placement-fallback to control the direction of the dialog.
- 14 Dec 2022 - Added click to open behaviour. So now hover / click is an option.
- Initial draft