Tooltips - Launchpad

Basic Positions

<div class="lp-demo-row">
    <button class="lp-btn lp-btn--outline-primary" data-lp-component="tooltip" data-lp-tooltip="Tooltip on top" data-lp-placement="top">Top</button>
    <button class="lp-btn lp-btn--outline-primary" data-lp-component="tooltip" data-lp-tooltip="Tooltip on bottom" data-lp-placement="bottom">Bottom</button>
    <button class="lp-btn lp-btn--outline-primary" data-lp-component="tooltip" data-lp-tooltip="Tooltip on left" data-lp-placement="left">Left</button>
    <button class="lp-btn lp-btn--outline-primary" data-lp-component="tooltip" data-lp-tooltip="Tooltip on right" data-lp-placement="right">Right</button>
</div>

Start / End Alignment

Each side has -start and -end variants that shift the arrow toward the beginning or end of the trigger.

<p class="lp-text-sm lp-text-muted lp-mb-3">Each side has <code class="lp-text-danger">-start</code> and <code class="lp-text-danger">-end</code> variants that shift the arrow toward the beginning or end of the trigger.</p>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--outline-info" data-lp-component="tooltip" data-lp-tooltip="Top start" data-lp-placement="top-start">top-start</button>
    <button class="lp-btn lp-btn--outline-info" data-lp-component="tooltip" data-lp-tooltip="Top end" data-lp-placement="top-end">top-end</button>
    <button class="lp-btn lp-btn--outline-info" data-lp-component="tooltip" data-lp-tooltip="Bottom start" data-lp-placement="bottom-start">bottom-start</button>
    <button class="lp-btn lp-btn--outline-info" data-lp-component="tooltip" data-lp-tooltip="Bottom end" data-lp-placement="bottom-end">bottom-end</button>
    <button class="lp-btn lp-btn--outline-info" data-lp-component="tooltip" data-lp-tooltip="Left start" data-lp-placement="left-start">left-start</button>
    <button class="lp-btn lp-btn--outline-info" data-lp-component="tooltip" data-lp-tooltip="Left end" data-lp-placement="left-end">left-end</button>
    <button class="lp-btn lp-btn--outline-info" data-lp-component="tooltip" data-lp-tooltip="Right start" data-lp-placement="right-start">right-start</button>
    <button class="lp-btn lp-btn--outline-info" data-lp-component="tooltip" data-lp-tooltip="Right end" data-lp-placement="right-end">right-end</button>
</div>

Solid Colors

<button data-lp-component="tooltip" data-lp-tooltip="Primary" data-lp-color="primary">Primary</button>
<button data-lp-component="tooltip" data-lp-tooltip="Secondary" data-lp-color="secondary">Secondary</button>
<button data-lp-component="tooltip" data-lp-tooltip="Success" data-lp-color="success">Success</button>
<button data-lp-component="tooltip" data-lp-tooltip="Danger" data-lp-color="danger">Danger</button>
<button data-lp-component="tooltip" data-lp-tooltip="Warning" data-lp-color="warning">Warning</button>
<button data-lp-component="tooltip" data-lp-tooltip="Info" data-lp-color="info">Info</button>
<button data-lp-component="tooltip" data-lp-tooltip="Dark" data-lp-color="dark">Dark</button>
<button data-lp-component="tooltip" data-lp-tooltip="Light" data-lp-color="light">Light</button>

Soft Colors

Add data-lp-variant="soft" for soft/pastel backgrounds.

<button data-lp-component="tooltip" data-lp-tooltip="Soft primary" data-lp-color="primary" data-lp-variant="soft">Primary</button>
<button data-lp-component="tooltip" data-lp-tooltip="Soft secondary" data-lp-color="secondary" data-lp-variant="soft">Secondary</button>
<button data-lp-component="tooltip" data-lp-tooltip="Soft success" data-lp-color="success" data-lp-variant="soft">Success</button>
<button data-lp-component="tooltip" data-lp-tooltip="Soft danger" data-lp-color="danger" data-lp-variant="soft">Danger</button>
<button data-lp-component="tooltip" data-lp-tooltip="Soft warning" data-lp-color="warning" data-lp-variant="soft">Warning</button>
<button data-lp-component="tooltip" data-lp-tooltip="Soft info" data-lp-color="info" data-lp-variant="soft">Info</button>

Outline Colors

Add data-lp-variant="outline" for bordered transparent tooltips.

<button data-lp-component="tooltip" data-lp-tooltip="Outline primary" data-lp-color="primary" data-lp-variant="outline">Primary</button>
<button data-lp-component="tooltip" data-lp-tooltip="Outline secondary" data-lp-color="secondary" data-lp-variant="outline">Secondary</button>
<button data-lp-component="tooltip" data-lp-tooltip="Outline success" data-lp-color="success" data-lp-variant="outline">Success</button>
<button data-lp-component="tooltip" data-lp-tooltip="Outline danger" data-lp-color="danger" data-lp-variant="outline">Danger</button>
<button data-lp-component="tooltip" data-lp-tooltip="Outline warning" data-lp-color="warning" data-lp-variant="outline">Warning</button>
<button data-lp-component="tooltip" data-lp-tooltip="Outline info" data-lp-color="info" data-lp-variant="outline">Info</button>

Sizes

<div class="lp-demo-row lp-items-end">
    <button class="lp-btn lp-btn--primary lp-btn--sm" data-lp-component="tooltip" data-lp-tooltip="Small tooltip" data-lp-size="sm">Small</button>
    <button class="lp-btn lp-btn--primary" data-lp-component="tooltip" data-lp-tooltip="Default tooltip">Default</button>
    <button class="lp-btn lp-btn--primary lp-btn--lg" data-lp-component="tooltip" data-lp-tooltip="Large tooltip" data-lp-size="lg">Large</button>
</div>

Animations

Three animation modes: fade, scale (default), slide.

<p class="lp-text-sm lp-text-muted lp-mb-3">Three animation modes: <code class="lp-text-danger">fade</code>, <code class="lp-text-danger">scale</code> (default), <code class="lp-text-danger">slide</code>.</p>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--outline-primary" data-lp-component="tooltip" data-lp-tooltip="Fade animation" data-lp-animation="fade">Fade</button>
    <button class="lp-btn lp-btn--outline-primary" data-lp-component="tooltip" data-lp-tooltip="Scale animation" data-lp-animation="scale">Scale</button>
    <button class="lp-btn lp-btn--outline-primary" data-lp-component="tooltip" data-lp-tooltip="Slide animation" data-lp-animation="slide">Slide</button>
</div>

Keyboard Shortcuts

Display keyboard shortcuts with data-lp-shortcut. Symbols auto-adapt to Mac (⌘, ⇧, ⌥) or Windows (Ctrl, Shift, Alt).

Shortcut-only (no text):

<p class="lp-text-sm lp-text-muted lp-mb-3">Display keyboard shortcuts with <code class="lp-text-danger">data-lp-shortcut</code>. Symbols auto-adapt to Mac (⌘, ⇧, ⌥) or Windows (Ctrl, Shift, Alt).</p>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--primary" data-lp-component="tooltip" data-lp-tooltip="Save" data-lp-shortcut="Ctrl+S">Save</button>
    <button class="lp-btn lp-btn--primary" data-lp-component="tooltip" data-lp-tooltip="Find" data-lp-shortcut="Cmd+F">Find</button>
    <button class="lp-btn lp-btn--primary" data-lp-component="tooltip" data-lp-tooltip="Command palette" data-lp-shortcut="Ctrl+Shift+P">Palette</button>
    <button class="lp-btn lp-btn--soft-primary" data-lp-component="tooltip" data-lp-tooltip="Submit" data-lp-shortcut="Enter">Submit</button>
    <button class="lp-btn lp-btn--soft-primary" data-lp-component="tooltip" data-lp-tooltip="Close" data-lp-shortcut="Escape">Close</button>
</div>
<p class="lp-text-sm lp-text-muted lp-mb-2 lp-mt-4">Shortcut-only (no text):</p>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--outline-secondary lp-btn--icon" data-lp-component="tooltip" data-lp-shortcut="Ctrl+K"><span class="material-symbols-outlined">search</span></button>
    <button class="lp-btn lp-btn--outline-secondary lp-btn--icon" data-lp-component="tooltip" data-lp-shortcut="Ctrl+N"><span class="material-symbols-outlined">add</span></button>
    <button class="lp-btn lp-btn--outline-secondary lp-btn--icon" data-lp-component="tooltip" data-lp-shortcut="Ctrl+Z"><span class="material-symbols-outlined">undo</span></button>
</div>

HTML Content Tooltips

Enable rich HTML inside tooltips with data-lp-html="true". Build mini-cards, status indicators, dashboards, code previews and more — anything HTML can render fits inside a tooltip.

Live System Indicators

Profile & Author Cards

Pricing & Plan Details

Code & Color Previews

Mini Dashboards

Inline Markup & Icons

<p class="lp-text-sm lp-text-muted lp-mb-3">Enable rich HTML inside tooltips with <code class="lp-text-danger">data-lp-html="true"</code>. Build mini-cards, status indicators, dashboards, code previews and more — anything HTML can render fits inside a tooltip.</p>

<h6 class="lp-mt-4 lp-mb-2">Live System Indicators</h6>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--success"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="light"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='display:flex;align-items:center;gap:6px;'&gt;&lt;span style='width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.2);'&gt;&lt;/span&gt;&lt;strong&gt;All systems operational&lt;/strong&gt;&lt;/div&gt;&lt;div style='font-size:11px;opacity:0.7;margin-top:2px;'&gt;Uptime: 99.98% (30d)&lt;/div&gt;">
        <span class="material-symbols-outlined">cloud_done</span>
        Server Status
    </button>
    <button class="lp-btn lp-btn--danger"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="danger"
        data-lp-variant="soft"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='font-weight:600;margin-bottom:2px;'&gt;Build Failed&lt;/div&gt;&lt;div style='font-size:11px;'&gt;commit a1b2c3d &amp;middot; 2 errors, 7 warnings&lt;/div&gt;&lt;div style='font-size:10px;font-family:monospace;opacity:0.85;margin-top:4px;'&gt;src/auth.ts:42 — Cannot find name &quot;User&quot;&lt;/div&gt;">
        <span class="material-symbols-outlined">error</span>
        Build Failed
    </button>
    <button class="lp-btn lp-btn--warning"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="warning"
        data-lp-variant="soft"
        data-lp-tooltip="&lt;div style='font-weight:600;'&gt;3 unread notifications&lt;/div&gt;&lt;div style='font-size:11px;opacity:0.85;'&gt;1 mention &amp;middot; 2 replies&lt;/div&gt;">
        <span class="material-symbols-outlined">notifications</span>
        Notifications
    </button>
</div>

<h6 class="lp-mt-4 lp-mb-2">Profile &amp; Author Cards</h6>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--outline-secondary"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="light"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='display:flex;align-items:center;gap:10px;min-width:180px;'&gt;&lt;img src='https://i.pravatar.cc/40?img=12' style='width:36px;height:36px;border-radius:50%;'&gt;&lt;div style='text-align:left;'&gt;&lt;div style='font-weight:600;'&gt;Aria Mehta&lt;/div&gt;&lt;div style='font-size:11px;opacity:0.7;'&gt;Frontend Engineer · IST&lt;/div&gt;&lt;div style='font-size:10px;color:#22c55e;margin-top:2px;'&gt;● Active now&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">
        <span class="material-symbols-outlined">person</span>
        Assignee Info
    </button>
    <button class="lp-btn lp-btn--outline-info"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="light"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='text-align:left;'&gt;&lt;div style='font-weight:600;margin-bottom:4px;'&gt;Edited 2 hours ago&lt;/div&gt;&lt;div style='font-size:11px;opacity:0.8;'&gt;by &lt;strong&gt;Hitesh V.&lt;/strong&gt;&lt;br&gt;Last commit: &lt;em&gt;Refactor sidebar logic&lt;/em&gt;&lt;/div&gt;">
        <span class="material-symbols-outlined">history_edu</span>
        Author Info
    </button>
</div>

<h6 class="lp-mt-4 lp-mb-2">Pricing &amp; Plan Details</h6>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--primary"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="light"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='text-align:left;min-width:160px;'&gt;&lt;div style='font-size:18px;font-weight:700;color:#1b6ef3;'&gt;$29&lt;span style='font-size:11px;font-weight:400;opacity:0.7;'&gt;/month&lt;/span&gt;&lt;/div&gt;&lt;div style='font-size:11px;margin-top:6px;opacity:0.85;'&gt;✓ 10 team members&lt;br&gt;✓ 100GB storage&lt;br&gt;✓ Priority support&lt;br&gt;✓ Advanced reporting&lt;/div&gt;&lt;/div&gt;">
        <span class="material-symbols-outlined">workspace_premium</span>
        Pro Plan
    </button>
    <button class="lp-btn lp-btn--success"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="success"
        data-lp-variant="soft"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='font-weight:600;'&gt;Free forever&lt;/div&gt;&lt;div style='font-size:11px;opacity:0.85;margin-top:2px;'&gt;Up to 3 users · 1GB storage&lt;/div&gt;">
        <span class="material-symbols-outlined">redeem</span>
        Starter
    </button>
</div>

<h6 class="lp-mt-4 lp-mb-2">Code &amp; Color Previews</h6>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--dark"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="dark"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='font-family:monospace;font-size:11px;text-align:left;background:rgba(0,0,0,0.25);padding:6px 8px;border-radius:4px;'&gt;&lt;span style='color:#c792ea;'&gt;const&lt;/span&gt; &lt;span style='color:#82aaff;'&gt;sum&lt;/span&gt; = (a, b) =&amp;gt; a + b;&lt;/div&gt;">
        <span class="material-symbols-outlined">code</span>
        Snippet
    </button>
    <button class="lp-btn lp-btn--outline-primary"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="light"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='display:flex;gap:4px;'&gt;&lt;span style='width:18px;height:18px;background:#1b6ef3;border-radius:3px;'&gt;&lt;/span&gt;&lt;span style='width:18px;height:18px;background:#22c55e;border-radius:3px;'&gt;&lt;/span&gt;&lt;span style='width:18px;height:18px;background:#f59e0b;border-radius:3px;'&gt;&lt;/span&gt;&lt;span style='width:18px;height:18px;background:#ef4444;border-radius:3px;'&gt;&lt;/span&gt;&lt;span style='width:18px;height:18px;background:#8b5cf6;border-radius:3px;'&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style='font-size:10px;margin-top:4px;opacity:0.7;'&gt;Theme palette&lt;/div&gt;">
        <span class="material-symbols-outlined">palette</span>
        Color Palette
    </button>
    <button class="lp-btn lp-btn--outline-warning"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="warning"
        data-lp-tooltip="&lt;kbd style='padding:2px 6px;background:rgba(0,0,0,0.15);border-radius:3px;font-family:monospace;font-size:11px;'&gt;Ctrl&lt;/kbd&gt; + &lt;kbd style='padding:2px 6px;background:rgba(0,0,0,0.15);border-radius:3px;font-family:monospace;font-size:11px;'&gt;K&lt;/kbd&gt; to open menu">
        <span class="material-symbols-outlined">keyboard</span>
        Shortcut Tip
    </button>
</div>

<h6 class="lp-mt-4 lp-mb-2">Mini Dashboards</h6>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--outline-success"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="success"
        data-lp-variant="soft"
        data-lp-tooltip="&lt;div style='text-align:center;'&gt;&lt;div style='font-size:22px;font-weight:700;color:#22c55e;'&gt;↑ 18.4%&lt;/div&gt;&lt;div style='font-size:11px;opacity:0.8;'&gt;weekly active users&lt;/div&gt;&lt;/div&gt;">
        <span class="material-symbols-outlined">trending_up</span>
        Weekly Trend
    </button>
    <button class="lp-btn lp-btn--outline-info"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="light"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='display:flex;gap:14px;'&gt;&lt;div style='text-align:center;'&gt;&lt;div style='font-size:15px;font-weight:700;'&gt;42&lt;/div&gt;&lt;div style='font-size:9px;opacity:0.7;'&gt;OPEN&lt;/div&gt;&lt;/div&gt;&lt;div style='text-align:center;'&gt;&lt;div style='font-size:15px;font-weight:700;'&gt;128&lt;/div&gt;&lt;div style='font-size:9px;opacity:0.7;'&gt;CLOSED&lt;/div&gt;&lt;/div&gt;&lt;div style='text-align:center;'&gt;&lt;div style='font-size:15px;font-weight:700;color:#22c55e;'&gt;76%&lt;/div&gt;&lt;div style='font-size:9px;opacity:0.7;'&gt;RESOLVED&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">
        <span class="material-symbols-outlined">bug_report</span>
        Issue Tracker
    </button>
    <button class="lp-btn lp-btn--outline-primary"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="light"
        data-lp-size="lg"
        data-lp-tooltip="&lt;div style='min-width:140px;'&gt;&lt;div style='display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;'&gt;&lt;span&gt;Storage used&lt;/span&gt;&lt;strong&gt;6.2 / 10 GB&lt;/strong&gt;&lt;/div&gt;&lt;div style='height:5px;background:rgba(27,110,243,0.15);border-radius:3px;overflow:hidden;'&gt;&lt;div style='width:62%;height:100%;background:#1b6ef3;border-radius:3px;'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">
        <span class="material-symbols-outlined">storage</span>
        Storage Meter
    </button>
</div>

<h6 class="lp-mt-4 lp-mb-2">Inline Markup &amp; Icons</h6>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--primary"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-tooltip="Press &lt;strong&gt;Save&lt;/strong&gt; to keep your &lt;em&gt;changes&lt;/em&gt; safe">
        Bold &amp; Italic
    </button>
    <button class="lp-btn lp-btn--info"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-tooltip="&lt;span class='material-symbols-outlined' style='font-size:14px;vertical-align:middle;margin-right:4px;'&gt;lightbulb&lt;/span&gt;Tip: drag to reorder rows">
        Inline Icon
    </button>
    <button class="lp-btn lp-btn--soft-secondary"
        data-lp-component="tooltip"
        data-lp-html="true"
        data-lp-color="dark"
        data-lp-tooltip="&lt;span style='font-family:monospace;'&gt;npm install launchpad&lt;/span&gt;">
        Inline Code
    </button>
</div>

Triggers

Supported triggers: hover (default), click, focus, manual. Combine with space: hover focus.

<p class="lp-text-sm lp-text-muted lp-mb-3">Supported triggers: <code class="lp-text-danger">hover</code> (default), <code class="lp-text-danger">click</code>, <code class="lp-text-danger">focus</code>, <code class="lp-text-danger">manual</code>. Combine with space: <code class="lp-text-danger">hover focus</code>.</p>
<div class="lp-demo-row">
    <button class="lp-btn lp-btn--primary" data-lp-component="tooltip" data-lp-tooltip="Hover to show (default)">Hover</button>
    <button class="lp-btn lp-btn--primary" data-lp-component="tooltip" data-lp-tooltip="Click to toggle" data-lp-trigger="click">Click</button>
    <button class="lp-btn lp-btn--primary" data-lp-component="tooltip" data-lp-tooltip="Focus to show" data-lp-trigger="focus">Focus (tab here)</button>
    <button class="lp-btn lp-btn--primary" data-lp-component="tooltip" data-lp-tooltip="Hover or focus" data-lp-trigger="hover focus">Hover + Focus</button>
</div>

JavaScript API

Programmatic control of tooltips. Try the buttons below.

Event log:

// Get the instance
const tt = Tooltip.find(element);

// Show / hide / toggle
tt.show();
tt.hide();
tt.toggle();

// Update content
tt.setContent("New content");
tt.setShortcut("Ctrl+Shift+T");
tt.setColor("success");
tt.setPlacement("bottom");

// Temporary feedback tooltip
Tooltip.showTemporary(element, {
  content: "Saved!",
  color: "success",
  autoHide: 1500,
});

// Listen to events
element.addEventListener("lp:tooltip:shown", (e) => {
  console.log("Shown", e.detail);
});

CSS Reference

Class / Attribute	Description
`.lp-tooltip`	Base tooltip container
`.lp-tooltip-inner`	Content wrapper (text + shortcut)
`.lp-tooltip-text`	Main text content
`.lp-tooltip-divider`	Vertical separator between text and shortcut
`.lp-tooltip-shortcut`	Shortcut container
`.lp-tooltip-kbd`	Individual keyboard key
`.lp-tooltip-arrow`	Arrow pointer
`.lp-tooltip--{placement}`	12 placements: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end
`.lp-tooltip--{color}`	Solid color: primary, secondary, success, danger, warning, info, dark, light
`.lp-tooltip--soft-{color}`	Soft color variant (6 colors)
`.lp-tooltip--outline-{color}`	Outline color variant (6 colors)
`.lp-tooltip--sm` / `.lp-tooltip--lg`	Size variants
`.lp-tooltip--anim-fade` / `--anim-slide`	Animation modes (default is scale)
`.lp-tooltip--no-arrow`	Hide arrow
`.lp-tooltip--interactive`	Enable pointer events (click content inside)
`data-lp-component="tooltip"`	Auto-init
`data-lp-tooltip`	Tooltip text content
`data-lp-shortcut`	Keyboard shortcut (e.g. "Ctrl+S")
`data-lp-placement`	Placement (one of 12)
`data-lp-color`	Color name
`data-lp-variant`	soft \| outline (default solid)
`data-lp-size`	sm \| lg
`data-lp-animation`	fade \| scale \| slide
`data-lp-trigger`	hover \| click \| focus \| manual (space-separated)
`data-lp-delay` / `data-lp-hide-delay`	Show/hide delays in ms
`data-lp-auto-hide`	Auto-hide after N ms
`data-lp-html`	Allow HTML content
`data-lp-interactive`	Allow pointer events on tooltip
`data-lp-offset`	Distance from trigger (px)
`data-lp-arrow`	Show/hide arrow ("true"/"false")