Code example
To use the tooltips, you simply have to add the class ox-has-tooltip to the concerning element. In the data-attribute data-tooltip you can then add the helper text.
When using tooltips on icon buttons the title attribute isn't necessary because you have the custom tooltip, however it's recommended to add an aria-label instead for accessibility reasons.
1
2
3
<button type="button" class="ox-button ox-button--icon ox-button--ghost ox-has-tooltip" aria-label="Edit content" data-tooltip="Edit content">
<span class="ox-button__icon ox-icon ox-icon--edit"></span>
</button>
Positioning
Under the element
The different tooltips look the same but they can be positioned differently depending on your needs, all you have to do is add the needed modifier to the concerning element.
By default they are positioned underneath the element, but by adding the modifier ox-has-tooltip--bottom-right or ox-has-tooltip--bottom-left you can specify if the text is aligned to the right or the left.
1
2
<button type="button" class="ox-button ox-button--icon ox-button--ghost ox-has-tooltip ox-has-tooltip--bottom-right" aria-label="Edit content" data-tooltip="Edit content"><span class="ox-button__icon ox-icon ox-icon--edit"></span></button>
<button type="button" class="ox-button ox-button--icon ox-button--ghost ox-has-tooltip ox-has-tooltip--bottom-left" aria-label="Edit content" data-tooltip="Edit content"><span class="ox-button__icon ox-icon ox-icon--edit"></span></button>
Above the element
It's also possible to position the tooltips at the top of the specified element with the help of one of the following modifiers ox-has-tooltip--top, ox-has-tooltip--top-right or ox-has-tooltip--top-left.
1
2
3
<button type="button" class="ox-button ox-button--icon ox-button--ghost ox-has-tooltip ox-has-tooltip--top-right" aria-label="Edit content" data-tooltip="Edit content"><span class="ox-button__icon ox-icon ox-icon--edit"></span></button>
<button type="button" class="ox-button ox-button--icon ox-button--ghost ox-has-tooltip ox-has-tooltip--top" aria-label="Edit content" data-tooltip="Edit content"><span class="ox-button__icon ox-icon ox-icon--edit"></span></button>
<button type="button" class="ox-button ox-button--icon ox-button--ghost ox-has-tooltip ox-has-tooltip--top-left" aria-label="Edit content" data-tooltip="Edit content"><span class="ox-button__icon ox-icon ox-icon--edit"></span></button>
Next to the element
Last but not least you can show the tooltip right or left of the element with the class ox-has-tooltip--right or ox-has-tooltip--left.
1
2
<button type="button" class="ox-button ox-button--icon ox-button--ghost ox-has-tooltip ox-has-tooltip--right" aria-label="Edit content" data-tooltip="Edit content"><span class="ox-button__icon ox-icon ox-icon--edit"></span></button>
<button type="button" class="ox-button ox-button--icon ox-button--ghost ox-has-tooltip ox-has-tooltip--left" aria-label="Edit content" data-tooltip="Edit content"><span class="ox-button__icon ox-icon ox-icon--edit"></span></button>