Tooltip

The tooltip component is a simple component that displays a tooltip when hovered over.

Basic Usage

<spr-tooltip text="This is my tooltip text">
    <!-- Your component here -->
</spr-tooltip>

Custom Text

By adding the text prop to the tooltip component, you can customize the text that is displayed in the tooltip.

<spr-tooltip text="This is my custom tooltip text">
    <!-- Your component here -->
</spr-tooltip>

Custom Text Using HTML

You can also use HTML to further customize the text that you wanted to displayed in the tooltip by using a template named #popper-content.

Important to note:

If both text props and template #popper-content are used, the text prop will be always first displayed before the #popper-content.

<spr-tooltip text="This is my custom tooltip text">
  <template #popper-content>
    <h5>This is a sample title</h5>
  </template>

  <!-- Your component here -->
</spr-tooltip>

Position

<spr-tooltip text="My tooltip" placement="top-start">
    <!-- Your component here -->
</spr-tooltip>

Max Width

You can enable or disable the maximum width of the tooltip by using the has-max-width prop. By default, the max-width is enabled. When the has-max-width prop is set to true, the tooltip will have a maximum width of 280px.

<spr-tooltip>
  <template #popper-content>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia, 
      ante sit amet condimentum varius, metus enim luctus magna, ut vehicula ipsum quam vel odio.
    </p>
  </template>

  <!-- Your component here -->
</spr-tooltip>

<spr-tooltip>
  <template #popper-content :has-max-width="false">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia, 
      ante sit amet condimentum varius, metus enim luctus magna, ut vehicula ipsum quam vel odio.
    </p>
  </template>

  <!-- Your component here -->
</spr-tooltip>

API Reference

Name	Description	Type	Available Values	Default
text	Tooltip Label	String	-	''
placement	Tooltip Placement	String	'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'	'top'
hasMaxWidth	Enable or disable the maximum width of the tooltip. When enabled, the tooltip has a maximum width of 280px.	Boolean	true, false	true

Product Uses