Tooltips for icons - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki
The icons for noise level on https://www.library.ucsf.edu/use/student-study-spaces/ now have tooltips upon hover.
Steps
- use hot spot widget
- 20 pixel transparent image is necessary for the widget, then choose the icon and add tool tip text
- set trigger to hover
- style tool tip
- set direction for screen and mobile so it is visible
- set to inline
Video walkthrough of the workaround: https://youtu.be/Qbj3sRqCDwg
How we are using it
Adjust the offset of the hotspot to better align with the text on the Study Spaces page. Offsets of 50 are ideal, but any offset value other than 0 or 100 results in a javascript console warning with Elementor 3.25 and higher, so we use offsets of 100 with the default horizontal orientation (left) and the default vertical orientation (top).
