Skip to content
staticview

Tooltip Card

Use a tooltip for non-interactive card content attached to a link.

Warning

Tooltips are not designated for touch devices.

The example describes a piece of text containing a clickable link . When a user hovers over that link, a tooltip-style card appears.

Random image

You can include any content within the tooltip, as long as it is not interactive.

Code

The following example assumes that you have imported the component and set up the theme.

Tooltip Card
<p>
  The example describes a piece of text containing
  <a id="link-with-card" href="https://picsum.photos/200/200" target="_blank">a clickable link</a>
  . When a user hovers over that link, a tooltip-style card appears.
</p>


<sv-tooltip class="tooltip-card" for="#link-with-card" preferred-positions="bottom">
  <div class="tooltip-content">
    <img alt="Random image" src="https://picsum.photos/200/200" />
    <p>You can include any content within the tooltip, as long as it is not interactive.</p>
  </div>
</sv-tooltip>


2 collapsed lines
<style>
  .tooltip-card {
    --sv-bdr-rad-sm: 1em;
20 collapsed lines


    .tooltip-content {
      display: flex;
      flex-direction: column;
      gap: 0.8em;
      align-items: center;
      inline-size: min-content;
      padding: 0.4em;
    }


    p {
      margin: 0;
    }


    img {
      inline-size: 200px;
      block-size: 200px;
      border-radius: calc(var(--sv-bdr-rad-sm) - 0.4em);
    }
  }
</style>