<link-preview>

Custom element to hover link previews.

Demo

Usage

Include the <script> in your markup:

<script
  type="module"
  src="https://www.unpkg.com/@grislyeye/[email protected]/link-preview.js"></script>

Or, if you host the script as part of your project (recommended):

<script type="module">
  import '@grislyeye/link-preview/link-preview.js'
</script>

Examples

To create link previews within the same page:

<link-preview>
  <a href="#fragment">Link</a>
</link-preview>

To create link previews within the same origin:

<link-preview>
  <a href="https://same-origin.com/page">Link</a>
</link-preview>

Previews for external links are limited. You can only do so for pages with suitable CORS policies:

<link-preview>
  <a href="https://css.winterveil.net/">Link</a>
</link-preview>

We do not recommend using <link-previews> for external links.

Styling

<link-preview> exposes CSS custom properties and shadow parts that can be used to style the preview tooltip.

Supports the following shadow parts:

Part	Description
preview	The preview content container. You can use this to change the preview border style, etc.

For example:

link-preview::part(preview) {
  border: none;
  padding-left: 1em;
  padding-right: 1em;
}