Tooltip

Default

Usage

  <span
    class="gi-tooltip-wrapper"
    data-module="gieds-tooltip"
  >        
    <button
      data-testid="govieButton-default-primary-medium-notDisabled"
      data-element="button-container"
      data-module="gieds-button"
      class="gi-btn gi-btn-primary gi-btn-regular"
    >
      Default (Hover me)
    </button>
    <span 
      role="tooltip" 
      class="gi-tooltip gi-tooltip-top"
      aria-hidden="true"
    >
      Tooltip right.
    </span>
  </span>

{{ govieTooltip({
  "position": "top",
  "text": "Tooltip right.",
  "content": "\n    <button\n      data-testid=\"govieButton-default-primary-medium-notDisabled\"\n      data-element=\"button-container\"\n      data-module=\"gieds-button\"\n      class=\"gi-btn gi-btn-primary gi-btn-regular\"\n    >\n      Default (Hover me)\n    </button>"
}) }}

import { Tooltip, Button } from '@govie-ds/react';

<Tooltip
  text="Default Tooltip"
  position="top"
>
  <Button variant="primary">
    Hover me (Top)
  </Button>
</Tooltip>

Best Practices

• Keep the tooltip content concise and relevant. Tooltips are meant for brief contextual information.
• Avoid overloading tooltips with large amounts of text or complex HTML structures.
• Ensure the tooltip is accessible by providing appropriate ARIA attributes (aria-label, aria-describedby).
• Use tooltips sparingly to avoid overwhelming users with excessive hover points.
• Test tooltips on touch devices to ensure they don't obstruct essential UI elements.

When to use this component

• Use tooltips to provide additional information or context for UI elements without cluttering the interface.
• Ideal for explaining icons, abbreviations, or buttons that might not be immediately clear to the user.
• When information is supplementary and doesn’t require the user's immediate action.

When not to use this component

• Do not use tooltips for essential information critical to completing a task. Place such information directly in the UI.
• Avoid using tooltips on elements that users interact with on touch devices, as hover actions are less intuitive or non-functional.
• Refrain from placing tooltips in rapid action areas where users might not have time to hover over elements.

Status