Skip to main content

Tooltip

Overview​

The Tooltip component displays helpful information when users hover over or focus on an element.

It supports multiple positions, colors, and styles. Perfect for providing additional context, abbreviation expansions, or action descriptions.

Import​

import { Tooltip } from '@allxsmith/bestax-bulma';

Usage​

Basic Tooltip​

A simple tooltip on a button.

function example() {
  return (
    <Tooltip label="This is helpful information">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Positions​

Tooltip in different positions around the trigger.

function example() {
  return (
    <Buttons>
      <Tooltip label="Top tooltip" position="top">
        <Button>Top</Button>
      </Tooltip>
      <Tooltip label="Bottom tooltip" position="bottom">
        <Button>Bottom</Button>
      </Tooltip>
      <Tooltip label="Left tooltip" position="left">
        <Button>Left</Button>
      </Tooltip>
      <Tooltip label="Right tooltip" position="right">
        <Button>Right</Button>
      </Tooltip>
    </Buttons>
  );
}

Colors​

Tooltip with different color variants.

function example() {
  return (
    <Buttons>
      <Tooltip label="Primary" color="primary">
        <Button color="primary">Primary</Button>
      </Tooltip>
      <Tooltip label="Link" color="link">
        <Button color="link">Link</Button>
      </Tooltip>
      <Tooltip label="Info" color="info">
        <Button color="info">Info</Button>
      </Tooltip>
      <Tooltip label="Success" color="success">
        <Button color="success">Success</Button>
      </Tooltip>
      <Tooltip label="Warning" color="warning">
        <Button color="warning">Warning</Button>
      </Tooltip>
      <Tooltip label="Danger" color="danger">
        <Button color="danger">Danger</Button>
      </Tooltip>
    </Buttons>
  );
}

Multiline​

Tooltip that wraps to multiple lines for longer content.

function example() {
  return (
    <Block p="5">
      <Tooltip
        label="This is a longer tooltip that wraps to multiple lines. It's useful for displaying more detailed information."
        multiline
      >
        <Button>Hover for more info</Button>
      </Tooltip>
    </Block>
  );
}

Always Visible​

Tooltip that's always visible, regardless of hover state.

function example() {
  return (
    <Block p="5">
      <Tooltip label="I'm always visible!" active color="info">
        <Button>Always visible tooltip</Button>
      </Tooltip>
    </Block>
  );
}

Dashed Underline​

Tooltip on text with a dashed underline to indicate more info is available.

function example() {
  return (
    <Paragraph>
      The term{' '}
      <Tooltip label="Application Programming Interface" dashed>
        <Span>API</Span>
      </Tooltip>{' '}
      is commonly used in software development.
    </Paragraph>
  );
}

With Delay​

Tooltip that appears after a delay.

function example() {
  return (
    <Buttons>
      <Tooltip label="No delay" delay={0}>
        <Button>No delay</Button>
      </Tooltip>
      <Tooltip label="500ms delay" delay={500}>
        <Button>500ms delay</Button>
      </Tooltip>
      <Tooltip label="1 second delay" delay={1000}>
        <Button>1s delay</Button>
      </Tooltip>
    </Buttons>
  );
}

On Icons​

Tooltips on icon buttons for action descriptions.

function example() {
  return (
    <Block display="flex" p="6">
      <Tooltip label="Delete item" color="danger" position="bottom">
        <Span cursor="pointer">
          <Icon name="fas fa-trash" />
        </Span>
      </Tooltip>
      <Tooltip label="Edit item" color="info" position="bottom">
        <Span cursor="pointer">
          <Icon name="fas fa-edit" />
        </Span>
      </Tooltip>
      <Tooltip label="Download" color="success" position="bottom">
        <Span cursor="pointer">
          <Icon name="fas fa-download" />
        </Span>
      </Tooltip>
    </Block>
  );
}

Form Field Help​

Using tooltips to provide help for form fields.

function example() {
  return (
    <Field>
      <label className="label">
        Password{' '}
        <Tooltip
          label="Must be at least 8 characters with one number and one special character"
          multiline
          color="info"
        >
          <Span cursor="help">
            <Icon name="fas fa-question-circle" size="small" />
          </Span>
        </Tooltip>
      </label>
      <Control>
        <Input type="password" placeholder="Enter password" />
      </Control>
    </Field>
  );
}

Abbreviations​

Using tooltips to explain abbreviations in text.

function example() {
  return (
    <Paragraph style={{ lineHeight: 1.8 }}>
      Hover over{' '}
      <Tooltip label="Cascading Style Sheets" color="info" dashed>
        <Span>CSS</Span>
      </Tooltip>{' '}
      or{' '}
      <Tooltip label="HyperText Markup Language" color="info" dashed>
        <Span>HTML</Span>
      </Tooltip>{' '}
      to see their full names.
    </Paragraph>
  );
}

Accessibility​

Tooltip is built to WCAG's Content on Hover or Focus criterion:

  • Dismissible: Escape hides a shown tooltip wherever focus is, without moving the pointer or focus, and it stays hidden until the pointer or focus leaves the trigger and comes back. The keypress belongs to whatever has focus. When that's the trigger or nothing, the tooltip takes it, so a Popover or Modal around it stays open. When it's something else, such as a field elsewhere on the page, the tooltip still hides and the key goes on to it. With no tooltip showing, Escape goes on as usual.
  • Hoverable: the pointer can move from the trigger onto a shown tooltip, across the gap between them, and it stays. A hidden tooltip lets the pointer through to whatever is under it.
  • Persistent: no timer hides a tooltip that's hovered or focused.

And around it:

  • Keyboard focus on the trigger shows the tooltip, as hover does. Focus that a click or a tap brings doesn't, and neither does a touch pointer, so tapping the trigger just does what the trigger does.
  • An active tooltip is always shown, whatever the pointer, focus and Escape do. It's part of the page rather than something hover or focus brought, so Escape goes on to whatever else listens.
  • Tooltip content has role="tooltip", and aria-hidden while it's hidden.
  • The trigger isn't linked to the tooltip with aria-describedby, so a screen reader doesn't announce the tooltip with it. Give an icon-only trigger its own name, such as an aria-label.
  • The dashed style provides a visual cue that more information is available.
  • Icon - Icon component
  • Button - Button component
  • Popover - A click-to-open panel for content people interact with
  • HoverCard - A card that opens on hover or keyboard focus, for previews that hold links

Props​

PropTypeDefaultDescription
labelstring—The tooltip text content.
contentReact.ReactNode—Rich tooltip content (alternative to label).
position'top' | 'bottom' | 'left' | 'right' | 'auto''top'Position of the tooltip. Default: 'top'.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'dark' | 'light'—Color variant for the tooltip.
size'small' | 'medium' | 'large'—Size of the tooltip.
activebooleanfalseForce tooltip to be always visible. Hover, focus and Escape leave it shown, so Escape goes on to whatever has focus, or to a Modal or Popover around it.
multilinebooleanfalseAllow tooltip to wrap to multiple lines.
animatedbooleantrueEnable fade animation. Default: true.
squarebooleanfalseUse square corners instead of rounded.
dashedbooleanfalseShow dashed underline on trigger.
delaynumber0How long the pointer or keyboard focus waits on the trigger before the tooltip shows, in milliseconds.
closeDelaynumber0How long the tooltip stays after the pointer and focus have left the trigger and the tooltip, in milliseconds. The pointer can move from the trigger onto a shown tooltip without one.
tooltipClassNamestring—Additional classes for the tooltip element.
childrenReact.ReactNode—The element that triggers the tooltip.
classNamestring—Additional CSS classes.
...All standard <span> attributes and Bulma helper props—See Helper Props

CSS & Sass Variables​

Tooltip registers these variables on its own .tooltip element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS VariableSass VariableDefault
--bulma-tooltip-background ‡$tooltip-backgroundhsl(0, 0%, 21%)
--bulma-tooltip-color ‡$tooltip-colorwhite
--bulma-tooltip-radius ‡$tooltip-radiusvar(--bulma-radius)
--bulma-tooltip-padding ‡$tooltip-padding0.35rem 0.75rem
--bulma-tooltip-max-width ‡$tooltip-max-width15rem
--bulma-tooltip-multiline-width ‡$tooltip-multiline-width15rem
--bulma-tooltip-arrow-size ‡$tooltip-arrow-size5px
--bulma-tooltip-arrow-margin ‡$tooltip-arrow-margin4px
--bulma-tooltip-z-index ‡$tooltip-z-index$extras-z-index-tooltip
--bulma-tooltip-font-size ‡$tooltip-font-sizecalc($extras-size-normal * 0.85)
--bulma-tooltip-font-weight ‡$tooltip-font-weight$extras-weight-normal
--bulma-tooltip-line-height ‡$tooltip-line-height1.25
--bulma-tooltip-dashed-color$tooltip-dashed-colorhsl(0, 0%, 60%)

‡ declared on a constituent element: values set via className, the style prop, or an ancestor are only inherited and lose — target the declaring element in your CSS.