🚀 Astro — Tooltips
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;
}To do
- [ ] Theming
- [ ] Override
- [ ] Docs
