Tooltip
Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus.
Class | Type | |
---|---|---|
tooltip
|
Tooltip | A class representing a tooltip |
Components
Tooltips consist of two components:
Class | Type | |
---|---|---|
tooltip-popup
|
Text | |
is-bottom
|
Align Bottom | The tooltip will appear below the element. |
is-center
|
Align Center | The tooltip will be align center to the partial |
is-end
|
Align Center | The tooltip will be align end of the partial |
<button class="tooltip" aria-label="variables info">
<span class="icon-info" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip">Set variables or secret keys.</span>
</button>
<button class="tag tooltip">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">User ID</span>
<span class="tooltip-popup" role="tooltip">
<p class="text u-margin-block-start-8">Set variables or secret keys.</p>
</span>
</button>
<button class="tag tooltip">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">User ID</span>
<span class="tooltip-popup is-bottom" role="tooltip">Set variables or secret keys.</span>
</button>