component

TuxInfoLabel

Form-field label with an (i) info button. Hover or click the button to reveal a UPopover with the extended explanation. Built for technical research forms where field meanings deserve context — ITAR rubrics, retention classes, classifier metric definitions, model-config knobs. Pair with form primitives via the standard for= attribute.

canonical

Required field with help

required adds a maroon * after the label. The #info slot is the popover body — any Vue content, including inline code, fits. 

<tux-info-label for="cls-211-threshold" required>
  Classifier threshold
  <template #info>
    The cosine-similarity floor above which CLS-211 marks a document as
    ITAR-positive. Anything below this is sent to manual review.
  </template>
</tux-info-label>
<UInput id="cls-211-threshold" v-model="threshold" type="number" step="0.01" />

click trigger

Click instead of hover

Default trigger is hover (matches Fluent 2). Pass trigger="click" for keyboard-first or touch-heavy surfaces, or when the help text is long enough that "tooltip on hover" feels too transient. 

<tux-info-label
  for="retention-class"
  trigger="click"
>
  Retention class
  <template #info>
    <p>Retention controls how long Landscape holds the artifact:</p>
    <p>
      <code>permanent</code> — keep until manual delete.<br>
      <code>30d</code> — auto-purge after 30 days.<br>
      <code>session</code> — discarded at session end.
    </p>
  </template>
</tux-info-label>