πŸš€Β Β Astro β€” Tooltips


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

Keywords:

  • astro
  • astro-component
  • tooltips
  • native
  • vanilla
  • progressive
  • javascript
  • links

Component live demo



πŸš€Β Β Astro β€” Tooltips

NPM Downloads ISC License PRs Welcome
Astro TypeScript Prettier EditorConfig ESLint

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

TypeScript API

Extends: Partial<TippyProps>


name
type
required
default
allowHTML
boolean
false
true
theme
string
false
'default'
maxWidth
string
false
'none'
delay
[number, number]
false
[15, 150]
placement
Placement
false
'auto'
interactive
boolean
false
true

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.6.0 (2022-10-17)

Features

  • init app tooltips component (e958898)
  • make component extendable to user (94a174b)

Bug Fixes

  • extract client for typescript support (d983140)
  • install deps., update configs, docs (1ddf5a1)
  • move css to frontmatter (386fb9d)
  • must move scss to global import (39b0c55)
  • proper typings (adaf993)
  • remove package prefix, simplify import method (73bd31b)
  • unneeded scss import, crash (5c6c2b0)
  • unused scss style causing ssr crash (0173508)

0.11.1 (2022-09-22)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.11.0 (2022-08-25)

Features

  • make component extendable to user (94a174b)

0.10.17 (2022-08-22)

Bug Fixes

  • unused scss style causing ssr crash (0173508)

0.10.16 (2022-08-20)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.15 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.14 (2022-07-24)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.13 (2022-07-18)

Bug Fixes

  • move css to frontmatter (386fb9d)

0.10.12 (2022-06-28)

Bug Fixes

  • extract client for typescript support (d983140)
  • must move scss to global import (39b0c55)
  • proper typings (adaf993)

0.10.11 (2022-06-26)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.10 (2022-06-25)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.9 (2022-06-22)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.8 (2022-06-21)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.7 (2022-06-20)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.6 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.5 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.4 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.3 (2022-06-19)

Bug Fixes

  • unneeded scss import, crash (5c6c2b0)

0.10.2 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.1 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-tooltips

0.10.0 (2022-06-19)

Features

  • init app tooltips component (e958898)
...

Licenses

Package
Author
License
URL

⚠️  Having an issue? / πŸ—£   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.