Skip to content

Tooltip

A small inline component that displays a short snippet of text on click.

Table of Contents

  1. Anatomy
  2. Specifications
    1. Properties
    2. Styling
      1. Colors
  3. Changelog
  4. Related
    1. Contains
  5. Examples

Anatomy

  1. Trigger
  2. Content

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
contentstring Simple string of content that appears in the panel on click. Should not contain any HTML. Yes-
labelstring Accessible label for screen readers No"more info"
classstring list of additional classes to apply to main element. No-

Styling

Colors

NameApplicationCustom PropertyRolesDefault OpacityDescription
bg-colorbackground--tux-comp-popover--bg-colorsurface--
text-colortext--tux-comp-popover--text-coloron-surface, on-background--
shadow-colorshadow--tux-comp-popover--shadow-colorshadow0.25-

Changelog

1.5.0

  • popover added

Contains

Other core components embedded within this template.

Examples

Default 

{{ include( 'components/popover.twig', {
	label: "in-state definition"
	content: "In-state includes any of the neighboring counties of states adjacent to where we are located."
} ) }}