🚀  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
<div class="git-footer">
LIVE DEMO  ðŸŽÂ DOCUMENTATION WEBSITE ⎋
🔗  JulianCataldo.com
</div>