Astro-tooltips NPM

🚀 Astro — Tooltips

Downloads

Progressively enhanced.
This component globally override regular title attributes on all links with Tippy.js tooltips.

📦 Installation

pnpm i astro-tooltips

🛠 Usage

---
import { Tooltips } from 'astro-tooltips';
// ...
---

Global settings: see all properties on Tippy documentation.

<!-- ... -->
<head>
  <!-- Place component inside `HEAD` tag -->

  <!-- All properties are optional, extends `TippyProps` typings -->
  <Tooltips interactive={false} delay={[15, 14000]} />

  <!-- ... -->
</head>

Use:

<!-- Use the regular title attribute on A tags -->
<a href="#" title="Hello!">Tooltip link</a>

<!-- Or anywhere else -->

<div title="Salut!">Tooltip static element</div>

Per tooltip global settings override:

// Tooltip placement control
<a href="#" title="Hello!" data-tooltip-placement="left">Tooltip left</a>

// Interactivity control
<a href="#" title="Hello!" data-tooltip-interactive="false">Tooltip left</a>

Theming

.tippy-box[data-theme='default'] {
  background-color: var(--vscode-menu-background);
  color: var(--vscode-badge-foreground);
  border: 1px solid var(--vscode-editorWidget-border);
  border-radius: 0.15rem;
  padding: 0.5rem;
  word-wrap: break-word;
}