Introduction Tooltip Components

[duckaxe]

Current state

Tooltips do not work on mobile devices. To solve this issue, I created two new components. Also to make it easier to integrate the tooltip icon in our code.

1. Icon with a tooltip <tooltip-icon />

<tooltip-icon 
    tooltip="Name of the device on your local network" 
/>

This is useful when a tooltip icon needs to be placed inside the copy as a single inline element.

2. Text + Icon with a tooltip <tooltip-text-icon />

<tooltip-text-icon
    text="Hostname"
    tooltip="Name of the device on your local network"
/>

Icon with a tooltip that is attached to the text (or rather, to the last word so that the icon does not wrap to a new line). This component make it easier for developers to add help icon with tooltip to form labels and headlines without worrying about the necessary HTML markup. The preferred way.

Layout

I researched the best practices for displaying tooltips on smartphones. As result, on icon tap the tooltip will be displayed at the bottom of the screen. This allows us to display a lot of text while remaining user-friendly and readable. The user can close the tooltip/layer by taping on the close button or outside the layer.

To demonstrate how it works, I added help icons with tooltips to the dashboard (shares rejection, see screens below) and the network view (hostname label). In general, we should inject more hints and integrate help icons in AxeOS. We can do that in a separate PR. This will reduce the number of support requests.

Desktop (tooltip on hover)

Mobile (tooltip on tap)

Mobile.mov

[github-actions]

Test Results

20 tests  ±0   20 ✅ ±0   0s ⏱️ ±0s
 1 suites ±0    0 💤 ±0 
 1 files   ±0    0 ❌ ±0 

Results for commit f97c7ff. ± Comparison against base commit 7c15658.

♻️ This comment has been updated with latest results.