Tooltip Icon Rail | Staticview

side="inline-end" places every tooltip beside the rail, and each tooltip sits right after its button. Each button carries an aria-label for its icon and aria-describedby for its tooltip. Adding long-press to the triggers reaches touch users while the tap keeps navigating, with user-select off so the hold does not start a selection.

Code

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

<nav class="icon-rail" aria-label="Primary">
31 collapsed lines
  <button type="button" class="active" aria-describedby="tooltip-files" aria-label="Files" data-sv-tooltip="tooltip-files">
    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z" />
    </svg>
  </button>
  <sv-tooltip id="tooltip-files" side="inline-end" trigger="hover focus long-press">Files</sv-tooltip>

  <button type="button" aria-describedby="tooltip-search" aria-label="Search" data-sv-tooltip="tooltip-search">
    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
      <path
        d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"
      />
    </svg>
  </button>
  <sv-tooltip id="tooltip-search" side="inline-end" trigger="hover focus long-press">Search</sv-tooltip>

  <button type="button" aria-describedby="tooltip-alerts" aria-label="Notifications" data-sv-tooltip="tooltip-alerts">
    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
      <path
        d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6v-5a6 6 0 0 0-4.5-5.8V4.5a1.5 1.5 0 0 0-3 0v.7A6 6 0 0 0 6 11v5l-2 2v1h16v-1z"
      />
    </svg>
  </button>
  <sv-tooltip id="tooltip-alerts" side="inline-end" trigger="hover focus long-press">Notifications</sv-tooltip>

  <button type="button" aria-describedby="tooltip-extensions" aria-label="Extensions" data-sv-tooltip="tooltip-extensions">
    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
      <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" />
    </svg>
  </button>
  <sv-tooltip id="tooltip-extensions" side="inline-end" trigger="hover focus long-press">Extensions</sv-tooltip>
</nav>

<style>
43 collapsed lines
  .icon-rail {
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    inline-size: fit-content;
    padding: 0.4rem;
    margin: auto;
    background-color: var(--sv-gray-7);
    border: 1px solid var(--sv-gray-5);
    border-radius: var(--sv-bdr-rad-md);

    button {
      display: grid;
      place-items: center;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      color: var(--sv-gray-3);
      cursor: pointer;
      user-select: none;
      background: none;
      border: none;
      border-radius: var(--sv-bdr-rad-md);

      svg {
        inline-size: 1.4rem;
      }

      &:hover,
      &:focus-visible {
        color: var(--sv-gray-1);
        background-color: var(--sv-gray-5);
      }

      &.active {
        color: var(--sv-accent);
      }
    }

    sv-tooltip {
      font-size: 0.875em;
      white-space: nowrap;
    }
  }
</style>