Skip to main content
LocalTapiola Turva

Tooltip ready

Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when user clicks or navigates to it via keyboard.

Please keep in mind that when the screen width is under 768px this component should always be positioned on the right side of the screen as it’s going to open towards left.

Examples

Open in new window
<div style="margin: 140px auto 0;width: 100px;min-height: 300px;">
  <duet-tooltip active>
    Hello, I’m a tooltip! To close me, you can click outside
    of the tooltip, hit ESC key or click the icon again.
  </duet-tooltip>
</div>
Open in new window
<div style="margin: 40px auto 0;width: 60%;min-height: 300px;">
  <duet-input label="Katuosoite" placeholder="Kadunnimi 1 A 2" tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the icon again." required expand></duet-input>
</div>

Properties #

PropertyAttributeDescriptionTypeDefault
accessibleLabelaccessible-labelAdds accessible label for the info icon that is only shown for screen readers. This property is always required to create an accessibly interface!string"Näytä lisätietoja"
activeactiveToggle whether the tooltip is initially visible or not. This property should not be used in production in most cases.booleanfalse
positionHorizontalposition-horizontalAdjust the horizontal positioning of the tooltip toggle in pixels. Can be a negative value as well. E.g. "-13px".string"0"
positionVerticalposition-verticalAdjust the vertical positioning of the tooltip toggle in pixels. Can be a negative value as well. E.g. "-13px".string"0"
themethemeTheme of the tooltip. Can be one of: "default", "turva".string""

Dependencies #

Used by #

Depends on #

Graph #

graph TD;
  duet-tooltip --> duet-visually-hidden
  duet-input --> duet-tooltip
  duet-select --> duet-tooltip
  duet-textarea --> duet-tooltip
  style duet-tooltip fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.