PreviewLink

Components for creating interactive inline links that trigger a floating content panel (tooltip/popup) on hover, enriching the reading experience without interrupting the flow of the main text.

Install

pnpm dlx hybrid-astro-ui@latest add preview-link

npx hybrid-astro-ui@latest add preview-link

yarn dlx hybrid-astro-ui@latest add preview-link

bunx hybrid-astro-ui@latest add preview-link

---
import { PreviewLinkContent, PreviewLinkTrigger } from "@/src/components/hybrid-astro-ui/link-trigger"
---
<p>
  Natural landscapes offer us moments of infinite contemplation, where every 
  element connects in perfect harmony. From snow-capped peaks to golden meadows, 
  the terrestrial 
  <PreviewLinkTrigger href="#" text="landscape">
    <PreviewLinkContent imageData={{ image: Land, alt: "Landscape" }}>
      Landscape — a realm where golden sunlight spills across vast valleys and 
      crystalline streams carve their way through timeless stone. In this space, 
      ancient trees stand as silent guardians while clouds drift lazily overhead, 
      painting shadows that dance across meadows and cliffs.
    </PreviewLinkContent>
  </PreviewLinkTrigger> invites us to lose ourselves in the vastness of horizons 
  that 
  <PreviewLinkTrigger href="#" text="foreground">
    <PreviewLinkContent imageData={{ image: Land, alt: "Foreground" }}>
      Foreground — where delicate wildflowers bloom at our feet and moss-covered 
      stones tell tales of countless seasons. This intimate layer reveals intricate 
      details often overlooked: dewdrops clinging to grass blades, weathered bark 
      patterns, and the subtle interplay of light filtering through nearby branches.
    </PreviewLinkContent>
  </PreviewLinkTrigger> stretch beyond our imagination.
</p>

PreviewLinkTrigger

This component renders as an HTML anchor element (<a>) and serves as the clickable trigger within text.

Content Model Rule: When used inside a standard paragraph (<p>), the PreviewLinkTrigger must only contain Phrasing Content (inline elements) to maintain valid HTML structure.

• Content Model (When used inside <p>): Must contain only Phrasing Content elements.
  • Examples of Allowed Elements:
    • Text (plain)
    • <span>
    • <strong>, <em>, <b>, <i>, etc. (Text formatting)
    • <img> (Image)
    • <abbr>, <cite>, <dfn>, <code>, etc.
  • Elements NOT Allowed: <div>, <p>, <h1>, <ul>,<a> etc.
• Props:
  • href (Optional)
  • text (Required)

PreviewLinkContent

This component renders as an HTML span element (<span>) and acts as the floating content container (the tooltip or popup). The <span> element is strictly designated for Phrasing Content (inline content).

Crucially, a <span> element CANNOT directly contain Block-Level elements like <div> or <p>.

• Content Model: Must contain only Phrasing Content elements.
  • Examples of Allowed Elements:
    • Text (plain)
    • <span> (nested)
    • <img> (Image)
  • Elements NOT Allowed (MUST BE AVOIDED): <div>, <p>, <h1>, <ul>, <a> etc.
• Props:
  • imageMetadata (Optional) - Expected to be an object: { image: any, alt: string }.