Usage
import { Tooltip } from 'nr1'Examples
Props
The information shown in the text can be complemented/extended with a link to documentation. This link should only be used to provide contextual information.
shape
Callback fired any time the user clicks on the link.
function (event: React.MouseEvent )Location object or url string to link to.
shape
Element to attach the tooltip to, hovering or focusing on this element will show the tooltip.
We recommend passing a focusable element so screen readers can announce the tooltip content.
TooltipTooltips appear next to the element, action, word, or phrase they are explaining. Default display is from the top, but you can also choose to display it from the right, bottom, or left.
<One ofTooltip.PLACEMENT_TYPE.BOTTOM,Tooltip.PLACEMENT_TYPE.LEFT,Tooltip.PLACEMENT_TYPE.RIGHT,Tooltip.PLACEMENT_TYPE.TOP,>Adds a data-test-id attribute. Use it to target the component in unit and
E2E tests.
For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.
For example, my-nerdpack.some-element.
Note: You might not see data-test-id attributes as they are removed
from the DOM, to debug them pass a e2e-test query parameter to the URL.
Tooltips should answer a question for the user. Tips should be crisp, clear, and helpful. Provide just enough information to answer questions without overloading the user.
- Keep the copy easy to read and clear. For longer copy, use complete sentences, active verbs, and punctuation.
- Give enough information to avoid misunderstandings. For example, if a button looks like it could add multiple things, use the tooltip to clarify what it actually adds.