component

TuxTeachingPopover

Onboarding / guided-tour tooltip. Distinguished from UTooltip (passive hover help) by the guided-flow affordances: optional header image, body, Next / Skip footer, and an explicit step counter. Default-anchored bottom-right of the viewport; consumers can wire to a specific affordance with their own positioning library.

single-step

One popover, one dismiss

Use a single popover (no counter, no Skip) when teaching one feature in context — a new menu item, a recently-added affordance. 

<tux-teaching-popover
  v-model="open"
  title="New feature"
  primary-label="Got it"
  no-secondary
>
  Single-step teaching popovers anchor to a UI affordance and dismiss
  with one primary action.
</tux-teaching-popover>

multi-step tour

Guided onboarding

Pass :total-steps > 1 to show the counter and Next / Skip buttons. v-model both the open state and the current step. 

<tux-teaching-popover
  v-model="tourOpen"
  v-model:step="tourStep"
  :total-steps="4"
  :title="tourSteps[tourStep - 1].title"
  @finish="tourOpen = false"
  @skip="tourOpen = false"
>
  {{ tourSteps[tourStep - 1].body }}
</tux-teaching-popover>

brand-tinted

On-brand variant

Pass on-brand for higher emphasis — surface fills with brand maroon. Use sparingly: mandatory acknowledgments, security notices, top-of-funnel onboarding only. 

<tux-teaching-popover
  v-model="open"
  title="Important announcement"
  on-brand
  primary-label="Acknowledge"
  no-secondary
>
  Brand-tinted variant draws more attention — reserve for security
  notices, mandatory acknowledgments, or critical onboarding moments.
</tux-teaching-popover>