Tooltip Basic | Staticview

Use for and preferred-positions to anchor a tooltip.
Warning
The tooltip component is not designated for touch devices.
Code

The following example assumes that you have imported the component and set up the theme.
<div class="tooltip-example">
  <button id="tooltip-icon-bottom" type="button" class="tooltip-trigger" style="align-self: center">
4 collapsed lines
    <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M480-280q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
      ></path>
    </svg>
  </button>

  <div style="display: flex; justify-content: space-between">
    <button id="tooltip-icon-right" type="button" class="tooltip-trigger">
5 collapsed lines
      <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M480-280q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
        ></path>
      </svg>
    </button>

    <button id="tooltip-icon-left" type="button" class="tooltip-trigger">
5 collapsed lines
      <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M480-280q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
        ></path>
      </svg>
    </button>
  </div>

  <button id="tooltip-icon-top" type="button" class="tooltip-trigger" style="align-self: center">
5 collapsed lines
    <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M480-280q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
      ></path>
    </svg>
  </button>

  <sv-tooltip for="#tooltip-icon-bottom" preferred-positions="bottom">
    <span>Preferred direction bottom</span>
  </sv-tooltip>

  <sv-tooltip for="#tooltip-icon-right" preferred-positions="right">
    <span>Preferred direction right</span>
  </sv-tooltip>

  <sv-tooltip for="#tooltip-icon-left" preferred-positions="left">
    <span>Preferred direction left</span>
  </sv-tooltip>

  <sv-tooltip for="#tooltip-icon-top" preferred-positions="top">
    <span>Preferred direction top</span>
  </sv-tooltip>
</div>

<style>
22 collapsed lines
  .tooltip-example {
    display: flex;
    flex-direction: column;
    gap: 1em;

    .tooltip-trigger {
      padding: 0.4em;
      color: var(--sv-gray-2);
      cursor: pointer;
      background-color: var(--sv-gray-5);
      border: none;
      border-radius: var(--sv-bdr-rad-md);

      svg {
        display: block;
        inline-size: 24px;
        block-size: 24px;
        fill: currentcolor;
      }
    }

    sv-tooltip {
      --sv-bdr-rad-sm: var(--sv-bdr-rad-lg);
    }
1 collapsed line
  }
</style>