Tooltips & Popovers

Living Documentation

Tooltips and popovers for lightweight guidance, context, and inline help

This page standardizes hover and click-triggered overlays across Lumora. Use it to document placement, trigger behavior, dismiss patterns, and content density for concise hints and richer popover panels.

Placement matrix Trigger patterns Live playground Copy-ready snippets

Catalog Blocks 6 Variants, placement, states, composition, snippets, playground

Overlay Types 2 Concise tooltips and rich-content popovers

Placement Modes 4 Top, right, bottom, and left supported in playground

Preview State Tooltip - Top Updates live from playground controls

1. Variant Matrix

Core overlay styles for hinting and richer inline guidance

Tooltip triggers

Popover triggers

2. Interaction Playground

Generate a tooltip or popover recipe from controls

Overlay Type

Placement

Trigger

Theme

Allow HTML content

Dismiss on next click

Use the preview button to instantiate the current overlay recipe with Bootstrap behavior.

Live Output

Tooltip Top

Tooltip, top placement, hover + focus trigger.

3. Placement and Triggering

Overlay direction and event patterns for real layouts

Placement set

Focus and click triggers

4. State Modeling

Disabled controls, dismiss behavior, and richer content density

Tooltip on disabled button wrapper

Richer popover content

5. Composition Patterns

Use in forms, data tables, and compact action surfaces

Form hint

API Key

Table action help

6. Real-use Snippets

Copy-ready tooltip and popover patterns for production usage

Tooltip Button

<button
  class="btn btn-outline btn-sm"
  data-bs-toggle="tooltip"
  data-bs-placement="top"
  title="Short guidance text"
>
  Hover Me
</button>

Popover Action

<button
  class="btn btn-soft btn-sm"
  data-bs-toggle="popover"
  data-bs-placement="right"
  data-bs-title="Action details"
  data-bs-content="Richer context for the selected action."
>
  Open Popover
</button>

Disabled Wrapper Tooltip

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled actions need a wrapper.">
  <button class="btn btn-outline-secondary" type="button" disabled>Disabled</button>
</span>