Component: Tooltips

[driskull]

calcite-tooltip

Properties

Property	Attribute	Description	Type	Default
open	open	Display and position the component.	boolean	false
placement	placement	Determines where the component will be positioned relative to the referenceElement.	"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"	"auto"
referenceElement	reference-element	Reference HTMLElement used to position this component.	HTMLElement | string	undefined
theme	theme	Select theme (light or dark)	"dark" | "light"	"light"

Methods

reposition() => Promise<void>

Returns

Type: Promise<void>

---

#155 (comment)

[driskull]

Notes.

[julio8a]

@driskull, the tooltip will only be the message on hover.

We should move the interaction versions (click, close X, image, button, etc) to the popover.

So tooltip can only have the text message and evoked on hover. Similar to a discussion we had.

[driskull]

Thanks @julio8a. I'll proceed with that.

[driskull]

Updated PR. Please review

[macandcheese]

Some tiny nitpicks, looks great!

[macandcheese]

Small update to css / clean classes no longer in use.

[macandcheese]

Good to merge this in? @driskull @julio8a

[paulcpederson]

Is this accessible? Looks like there isn't anything tying the popover to the triggered element. So if I put a popover on the screen in a different location, screen readers will have no way of understanding what element it describes.

[paulcpederson]

Consider a list of folders with buttons on each folder for edit/delete. If the popovers are placed outside the list so they aren't screwed up by overflow hidden, the screen reader will read "edit, delete, edit, delete, edit, delete, edit, delete, edit, delete" and then the names of the folders.

I think we should be using role="tooltip" and aria-describedby to connect them, but I could be wrong

[driskull]

We should add some aria roles to both components for sure. We could hold off or address in follow up issues.

[paulcpederson]

popovers most likely should be managed with aria-live regions so that screen-readers announce their content

[paulcpederson]

Follow up is fine by me, but we should capture in an issue to make sure we don't forget 👍

[julio8a]

What's the level of effort and time estimate? I feel that if we put it in an issue, it'll still take a few weeks or more to be taken care of, or when a user stumbles on the accessibility issue.

[driskull]

I can tackle it later today.

[driskull]

closing in favor of #167 167