Skip to content
staticview

Tooltip Form Help

trigger="click" turns each info icon into a toggletip, the pattern that reaches touch users. The icon is a real button with an aria-label, so the help is reachable by keyboard too.

Found under Settings, then Developer. Rotating the key signs out every connected client.
Events are sent here as POST requests. Must be reachable over HTTPS.

Code

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

Form Help
<form class="help-form">
36 collapsed lines
  <div class="help-field">
    <label for="api-key">
      API key
      <button type="button" aria-describedby="tooltip-api-key" aria-label="About the API key" data-sv-tooltip="tooltip-api-key">
        <svg aria-hidden="true" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24">
          <path d="M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20Zm-1 5h2v2h-2V7Zm0 4h2v6h-2v-6Z" />
        </svg>
      </button>
    </label>
    <input id="api-key" type="text" autocomplete="off" spellcheck="false" />


    <sv-tooltip id="tooltip-api-key" trigger="click">
      Found under Settings, then Developer. Rotating the key signs out every connected client.
    </sv-tooltip>
  </div>


  <div class="help-field">
    <label for="webhook-url">
      Webhook URL
      <button
        type="button"
        aria-describedby="tooltip-webhook"
        aria-label="About the webhook URL"
        data-sv-tooltip="tooltip-webhook"
      >
        <svg aria-hidden="true" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24">
          <path d="M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20Zm-1 5h2v2h-2V7Zm0 4h2v6h-2v-6Z" />
        </svg>
      </button>
    </label>
    <input id="webhook-url" type="text" autocomplete="off" spellcheck="false" />


    <sv-tooltip id="tooltip-webhook" trigger="click">
      Events are sent here as POST requests. Must be reachable over HTTPS.
    </sv-tooltip>
  </div>
</form>


<style>
59 collapsed lines
  .help-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-inline-size: 22rem;
    padding: clamp(1rem, 4vw, 2rem);
    margin: auto;
    background-color: var(--sv-gray-7);
    border: 1px solid var(--sv-gray-5);
    border-radius: var(--sv-bdr-rad-lg);
  }


  .help-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;


    label {
      display: flex;
      gap: 0.25rem;
      align-items: center;
      font-size: 0.8rem;
      font-weight: 650;
    }


    button {
      display: inline-flex;
      padding: 0.1em;
      color: var(--sv-gray-3);
      cursor: pointer;
      background: none;
      border: none;
      border-radius: 50%;


      svg {
        inline-size: 1.1rem;
      }
    }


    input {
      block-size: 2.5rem;
      padding-inline: 0.7rem;
      font: inherit;
      color: var(--sv-gray-1);
      background-color: var(--sv-gray-6);
      border: 1px solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);


      &:focus-visible {
        outline: 2px solid var(--sv-accent);
        outline-offset: 2px;
      }
    }


    sv-tooltip {
      max-inline-size: 30ch;
      font-size: 0.8rem;
    }
  }
</style>