Tooltip (tooltip)

🔗 External documentation.

ID Label Description Schema
label Label Label value.
tooltip Tooltip Tooltip text.
tooltip_id Tooltip ID ID used by button to toggle the tooltip. Randomly generated if empty.
                        type: string

                      
            id: tooltip
label: Tooltip
group: Other
homepage: 'https://designsystem.digital.gov/components/tooltip/'
variants:
    top:
        id: top
        label: Top
        description: 'Show on top.'
    right:
        id: right
        label: Right
        description: 'Show on right.'
    left:
        id: left
        label: Left
        description: 'Show on left.'
    bottom:
        id: bottom
        label: Bottom
        description: 'Show on bottom.'
slots:
    label:
        id: label
        label: Label
        description: 'Label value.'
    tooltip:
        id: tooltip
        label: Tooltip
        description: 'Tooltip text.'
props:
    tooltip_id:
        id: tooltip_id
        label: 'Tooltip ID'
        description: 'ID used by button to toggle the tooltip. Randomly generated if empty.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': tooltip
            label: Show
            tooltip: 'Lorem ipsum dolor sit amet consectetur adipiscing elit interdum habitant commodo'

          

Top ( top )

Show on top.

<button class="usa-button" type="button">Show </button>

Right ( right )

Show on right.

<button class="usa-button" type="button">Show </button>

Left ( left )

Show on left.

<button class="usa-button" type="button">Show </button>

Bottom ( bottom )

Show on bottom.

<button class="usa-button" type="button">Show </button>