UWC Components
  • Default
  • Material
  • Fluent

On this page

Tooltip

A hover/focus-triggered tooltip with arrow, show/hide delays, all 12 placements, and rich HTML content via slot.

uwc-tooltip wraps any trigger element and shows a positioned tooltip on hover or focus. It supports all 12 placements, configurable show/hide delays, and rich HTML content via slot="content".

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

import { UwcTooltip } from '@uwc/components/tooltip';
customElements.define('uwc-tooltip', UwcTooltip);

React

import { UwcTooltip } from '@uwc/components/react';

Usage

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-tooltip content="Helpful tip">
        <uwc-button slot="trigger" label="Hover me"></uwc-button>
      </uwc-tooltip>
    `;
  }
}

React

import React from 'react';
import { UwcTooltip } from '@uwc/components/react';

export default function App() {
  return (
    <UwcTooltip content="Helpful tip">
      <uwc-button slot="trigger" label="Hover me"></uwc-button>
    </UwcTooltip>
  );
}

Angular

import { Component } from '@angular/core';
import '@uwc/tooltip';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-tooltip content="Helpful tip">
      <uwc-button slot="trigger" label="Hover me"></uwc-button>
    </uwc-tooltip>
  `,
})
export class AppComponent {}

Vue

import '@uwc/tooltip';

export default {
  template: `
    <uwc-tooltip content="Helpful tip">
      <uwc-button slot="trigger" label="Hover me"></uwc-button>
    </uwc-tooltip>
  `,
};

Basic Usage

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
        <uwc-tooltip content="Save document (Ctrl+S)">
          <uwc-button slot="trigger" label="Save"></uwc-button>
        </uwc-tooltip>
        <uwc-tooltip content="Undo last action" placement="bottom">
          <uwc-button slot="trigger" label="Undo"></uwc-button>
        </uwc-tooltip>
        <uwc-tooltip content="Copy to clipboard" placement="right">
          <uwc-button slot="trigger" label="Copy"></uwc-button>
        </uwc-tooltip>
      </div>
    `;
  }
}

import React from 'react';
import { UwcTooltip } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', padding: '2rem' }}>
      <UwcTooltip content="Save document (Ctrl+S)">
        <uwc-button slot="trigger" label="Save"></uwc-button>
      </UwcTooltip>
      <UwcTooltip content="Undo last action" placement="bottom">
        <uwc-button slot="trigger" label="Undo"></uwc-button>
      </UwcTooltip>
      <UwcTooltip content="Copy to clipboard" placement="right">
        <uwc-button slot="trigger" label="Copy"></uwc-button>
      </UwcTooltip>
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip content="Save document (Ctrl+S)">
        <uwc-button slot="trigger" label="Save"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Undo last action" placement="bottom">
        <uwc-button slot="trigger" label="Undo"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Copy to clipboard" placement="right">
        <uwc-button slot="trigger" label="Copy"></uwc-button>
      </uwc-tooltip>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip content="Save document (Ctrl+S)">
        <uwc-button slot="trigger" label="Save"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Undo last action" placement="bottom">
        <uwc-button slot="trigger" label="Undo"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Copy to clipboard" placement="right">
        <uwc-button slot="trigger" label="Copy"></uwc-button>
      </uwc-tooltip>
    </div>
  `
};

Basic

Set content for plain-text tooltips. Place the trigger element in slot="trigger". 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('tooltip-basic-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
        <uwc-tooltip content="Save document (Ctrl+S)">
          <uwc-button slot="trigger" label="Save"></uwc-button>
        </uwc-tooltip>
        <uwc-tooltip content="Undo last action (Ctrl+Z)">
          <uwc-button slot="trigger" label="Undo"></uwc-button>
        </uwc-tooltip>
        <uwc-tooltip content="Copy selection (Ctrl+C)">
          <uwc-button slot="trigger" label="Copy"></uwc-button>
        </uwc-tooltip>
      </div>
    `;
  }
}

import React from 'react';
import { UwcTooltip } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', padding: '2rem' }}>
      <UwcTooltip content="Save document (Ctrl+S)">
        <uwc-button slot="trigger" label="Save"></uwc-button>
      </UwcTooltip>
      <UwcTooltip content="Undo last action (Ctrl+Z)">
        <uwc-button slot="trigger" label="Undo"></uwc-button>
      </UwcTooltip>
      <UwcTooltip content="Copy selection (Ctrl+C)">
        <uwc-button slot="trigger" label="Copy"></uwc-button>
      </UwcTooltip>
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip content="Save document (Ctrl+S)">
        <uwc-button slot="trigger" label="Save"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Undo last action (Ctrl+Z)">
        <uwc-button slot="trigger" label="Undo"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Copy selection (Ctrl+C)">
        <uwc-button slot="trigger" label="Copy"></uwc-button>
      </uwc-tooltip>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip content="Save document (Ctrl+S)">
        <uwc-button slot="trigger" label="Save"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Undo last action (Ctrl+Z)">
        <uwc-button slot="trigger" label="Undo"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Copy selection (Ctrl+C)">
        <uwc-button slot="trigger" label="Copy"></uwc-button>
      </uwc-tooltip>
    </div>
  `
};

Placements

Use any of the 12 placement values. The default is top.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('tooltip-placement-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;flex-wrap:wrap;padding:2rem;">
        ${['top', 'bottom', 'left', 'right', 'top-start', 'bottom-end'].map(p => html`
          <uwc-tooltip content=${p} placement=${p}>
            <uwc-button slot="trigger" label=${p}></uwc-button>
          </uwc-tooltip>
        `)}
      </div>
    `;
  }
}

import React from 'react';
import { UwcTooltip } from '@uwc/components/react';

export default function App() {
  const placements = ['top', 'bottom', 'left', 'right', 'top-start', 'bottom-end'];
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', padding: '2rem' }}>
      {placements.map(p => (
        <UwcTooltip key={p} content={p} placement={p}>
          <uwc-button slot="trigger" label={p}></uwc-button>
        </UwcTooltip>
      ))}
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;flex-wrap:wrap;padding:2rem;">
      @for (p of placements; track p) {
        <uwc-tooltip [content]="p" [placement]="p">
          <uwc-button slot="trigger" [label]="p"></uwc-button>
        </uwc-tooltip>
      }
    </div>
  `
})
export class AppComponent {
  placements = ['top', 'bottom', 'left', 'right', 'top-start', 'bottom-end'];
}

export default {
  data() {
    return { placements: ['top', 'bottom', 'left', 'right', 'top-start', 'bottom-end'] };
  },
  template: `
    <div style="display:flex;gap:1rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip v-for="p in placements" :key="p" :content="p" :placement="p">
        <uwc-button slot="trigger" :label="p"></uwc-button>
      </uwc-tooltip>
    </div>
  `
};

Rich HTML content

Use slot="content" instead of the content attribute to display rich HTML in the tooltip. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('tooltip-rich-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
        <uwc-tooltip placement="bottom">
          <uwc-button slot="trigger" label="Keyboard shortcut"></uwc-button>
          <div slot="content" style="padding:.5rem .75rem;line-height:1.6;">
            <strong>Save</strong> — <kbd style="background:#333;color:#fff;padding:.1em .35em;border-radius:3px;font-size:.85em">Ctrl</kbd> + <kbd style="background:#333;color:#fff;padding:.1em .35em;border-radius:3px;font-size:.85em">S</kbd>
          </div>
        </uwc-tooltip>
        <uwc-tooltip placement="bottom">
          <uwc-button slot="trigger" label="Status info"></uwc-button>
          <div slot="content" style="padding:.6rem .85rem;line-height:1.5;">
            <div style="font-weight:600;margin-bottom:.25rem;">System status</div>
            <div style="font-size:.8rem;opacity:.85;">All services operational</div>
          </div>
        </uwc-tooltip>
      </div>
    `;
  }
}

import React from 'react';
import { UwcTooltip } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', padding: '2rem' }}>
      <UwcTooltip placement="bottom">
        <uwc-button slot="trigger" label="Keyboard shortcut"></uwc-button>
        <div slot="content" style={{ padding: '.5rem .75rem', lineHeight: 1.6 }}>
          <strong>Save</strong> — <kbd style={{ background: '#333', color: '#fff', padding: '.1em .35em', borderRadius: '3px', fontSize: '.85em' }}>Ctrl</kbd> + <kbd style={{ background: '#333', color: '#fff', padding: '.1em .35em', borderRadius: '3px', fontSize: '.85em' }}>S</kbd>
        </div>
      </UwcTooltip>
      <UwcTooltip placement="bottom">
        <uwc-button slot="trigger" label="Status info"></uwc-button>
        <div slot="content" style={{ padding: '.6rem .85rem', lineHeight: 1.5 }}>
          <div style={{ fontWeight: 600, marginBottom: '.25rem' }}>System status</div>
          <div style={{ fontSize: '.8rem', opacity: 0.85 }}>All services operational</div>
        </div>
      </UwcTooltip>
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip placement="bottom">
        <uwc-button slot="trigger" label="Keyboard shortcut"></uwc-button>
        <div slot="content" style="padding:.5rem .75rem;line-height:1.6;">
          <strong>Save</strong> — <kbd style="background:#333;color:#fff;padding:.1em .35em;border-radius:3px;font-size:.85em">Ctrl</kbd> + <kbd style="background:#333;color:#fff;padding:.1em .35em;border-radius:3px;font-size:.85em">S</kbd>
        </div>
      </uwc-tooltip>
      <uwc-tooltip placement="bottom">
        <uwc-button slot="trigger" label="Status info"></uwc-button>
        <div slot="content" style="padding:.6rem .85rem;line-height:1.5;">
          <div style="font-weight:600;margin-bottom:.25rem;">System status</div>
          <div style="font-size:.8rem;opacity:.85;">All services operational</div>
        </div>
      </uwc-tooltip>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip placement="bottom">
        <uwc-button slot="trigger" label="Keyboard shortcut"></uwc-button>
        <div slot="content" style="padding:.5rem .75rem;line-height:1.6;">
          <strong>Save</strong> — <kbd style="background:#333;color:#fff;padding:.1em .35em;border-radius:3px;font-size:.85em">Ctrl</kbd> + <kbd style="background:#333;color:#fff;padding:.1em .35em;border-radius:3px;font-size:.85em">S</kbd>
        </div>
      </uwc-tooltip>
      <uwc-tooltip placement="bottom">
        <uwc-button slot="trigger" label="Status info"></uwc-button>
        <div slot="content" style="padding:.6rem .85rem;line-height:1.5;">
          <div style="font-weight:600;margin-bottom:.25rem;">System status</div>
          <div style="font-size:.8rem;opacity:.85;">All services operational</div>
        </div>
      </uwc-tooltip>
    </div>
  `
};
Save — Ctrl + S
System status
All services operational

Show and hide delay

Use show-delay and hide-delay (in milliseconds) to control how quickly the tooltip appears and disappears. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('tooltip-delay-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
        <uwc-tooltip content="No delay" show-delay="0" hide-delay="0">
          <uwc-button slot="trigger" label="Instant"></uwc-button>
        </uwc-tooltip>
        <uwc-tooltip content="Default delays" show-delay="400" hide-delay="100">
          <uwc-button slot="trigger" label="Default (400ms)"></uwc-button>
        </uwc-tooltip>
        <uwc-tooltip content="Slow to show, slow to hide" show-delay="800" hide-delay="400">
          <uwc-button slot="trigger" label="Slow (800ms)"></uwc-button>
        </uwc-tooltip>
      </div>
    `;
  }
}

import React from 'react';
import { UwcTooltip } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', padding: '2rem' }}>
      <UwcTooltip content="No delay" showDelay={0} hideDelay={0}>
        <uwc-button slot="trigger" label="Instant"></uwc-button>
      </UwcTooltip>
      <UwcTooltip content="Default delays" showDelay={400} hideDelay={100}>
        <uwc-button slot="trigger" label="Default (400ms)"></uwc-button>
      </UwcTooltip>
      <UwcTooltip content="Slow to show, slow to hide" showDelay={800} hideDelay={400}>
        <uwc-button slot="trigger" label="Slow (800ms)"></uwc-button>
      </UwcTooltip>
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip content="No delay" show-delay="0" hide-delay="0">
        <uwc-button slot="trigger" label="Instant"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Default delays" show-delay="400" hide-delay="100">
        <uwc-button slot="trigger" label="Default (400ms)"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Slow to show, slow to hide" show-delay="800" hide-delay="400">
        <uwc-button slot="trigger" label="Slow (800ms)"></uwc-button>
      </uwc-tooltip>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding:2rem;">
      <uwc-tooltip content="No delay" show-delay="0" hide-delay="0">
        <uwc-button slot="trigger" label="Instant"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Default delays" show-delay="400" hide-delay="100">
        <uwc-button slot="trigger" label="Default (400ms)"></uwc-button>
      </uwc-tooltip>
      <uwc-tooltip content="Slow to show, slow to hide" show-delay="800" hide-delay="400">
        <uwc-button slot="trigger" label="Slow (800ms)"></uwc-button>
      </uwc-tooltip>
    </div>
  `
};

Attributes

Name Type Default Description
content — — Plain text tooltip string.
placement — — Default: top.
offset — — Gap px. Default: 10 (slightly larger to clear arrow).
show-delay — — ms before showing. Default: 400.
hide-delay — — ms before hiding. Default: 100.
disabled — — Prevent the tooltip from showing.
arrow — — Show the placement arrow. Default: true.
trigger — — Trigger mode: hover focus | hover | focus | click | manual. Default: "hover focus".
trigger-id — — External trigger element id.
max-width — — Max panel width. Default: 260px.

Properties

Name Type Default Description
triggerId string | undefined — —
content string | undefined — —
placement Placement 'top' —
offset number 10 —
showDelay number 400 —
hideDelay number 100 —
disabled boolean false —
arrow boolean true —
triggerMode TooltipTrigger 'hover focus' —
maxWidth string '260px' —
isOpen boolean — —
styles array [styles] —

Slots

Name Description
trigger The element that triggers the tooltip.
content Rich HTML tooltip content (overrides `content` attr).

CSS Custom Properties

Name Default Description
--uwc-tooltip-bg — Default: #1c1c22
--uwc-tooltip-color — Default: rgba(255,255,255,0.88)
--uwc-tooltip-radius — Default: 7px
--uwc-tooltip-shadow — —
--uwc-tooltip-font-size — Default: 12px
--uwc-tooltip-max-width — Default: 260px
--uwc-tooltip-duration — Default: 120ms
--uwc-tooltip-z — Default: 9999

CSS Parts

Name Description
panel —
arrow —
text —