Progressively enhanced. This component globally override regular `title` attributes on all links with Tippy.js tooltips.
npm install astro-tooltips
!Downloads
Progressively enhanced.
This component globally override regular title attributes on all links with Tippy.js tooltips.
``sh`
pnpm i astro-tooltips
`astro`
---
import { Tooltips } from 'astro-tooltips';
// ...
---
Global settings: see all properties on Tippy documentation.
`astro
`
Use:
`astro
Tooltip link
Per tooltip global settings override:
tsx
// Tooltip placement control
Tooltip left// Interactivity control
Tooltip left
`Theming
css
.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