nve-tooltip

Et verktøyhint. Kan åpnes og lukkes programmatisk eller automatisk med ulike hendelser. Kan ha ulik farge og metning.

Arvet fra SlTooltip.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-tooltip.

 

Se også nve-label

Eksempler

nve-button

<nve-tooltip content="Dette er et verktøyhint">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

nve-icon

<nve-tooltip content="Hjelpetekst">
  <nve-icon style="font-size:24px;" name="design_services" />
</nve-tooltip>

Ulike farger og metningsgrader på tooltip

Du kan bruke ´variant´ for å sette farger, og ´saturation´ for å sette metningsgrad

• Variant kan være neutral, info, success, warning, error; neutral er standard
• Saturation kan være emphasized, subtle, default; emphasized er standard for tooltip

<div></div>
<div>Emphasized</div>
<div>Default</div>
<div>Subtle</div>
<div>Neutral</div>
<nve-tooltip content="neutral, emphasized">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="neutral, default" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="neutral, subtle" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<div>Info</div>
<nve-tooltip content="info, emphasized" variant="info">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="info, default" variant="info" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="info, subtle" variant="info" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<div>Success</div>
<nve-tooltip content="success, emphasized" variant="success">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="success, default" variant="success" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="success, subtle" variant="success" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<div>Warning</div>
<nve-tooltip content="warning, emphasized" variant="warning">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="warning, default" variant="warning" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="warning, subtle" variant="warning" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<div>Error</div>
<nve-tooltip content="error, emphasized" variant="error">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="error, default" variant="error" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="error, subtle" variant="error" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

Åpen-attributt og klikkbar trigger

Du kan bruke open for å sette at en tooltip er åpen dersom du vil styre dette fra utsiden. Bruk da også trigger="manual"

Du kan også bruke ulike trigger for å si når tooltip skal åpnes

<nve-tooltip content="Åpen tooltip" open trigger="manual">
  <nve-button>Alltid åpen</nve-button>
</nve-tooltip>

<nve-tooltip content="Har tooltip" trigger="focus">
  <nve-button>Fokus</nve-button>
</nve-tooltip>

<nve-tooltip content="Du klikket" trigger="click">
  <nve-button>Klikk</nve-button>
</nve-tooltip>

Innhold i tooltip

Du kan bruke content-sporet dersom du vil ha mer enn enkel tekst i tooltip

<nve-tooltip trigger="click" placement="bottom">
  <div slot="content" style="display:flex; align-items: center; gap: 8px; justify-content: flex-start;">
    <nve-icon style="font-size:24px;" name="info"></nve-icon>
    <div style="max-width: 12ch;">Tooltip med ikon og tekst</div>
  </div>
  <nve-button>Klikk for å åpne</nve-button>
</nve-tooltip>

Plassering av tooltip

Du kan bruke placement for å si hvilken side tooltip skal være på

<nve-tooltip placement="top-start" content="top-start">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip placement="top" content="top">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip placement="top-end" content="top-end">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip placement="left-start" content="left-start">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<div></div>
<nve-tooltip placement="right-start" content="right-start">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip placement="bottom-start" content="bottom-start">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip placement="bottom" content="bottom">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip placement="bottom-end" content="bottom-end">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
variant	'neutral' | 'success' | 'info' | 'warning' | 'error' = 'neutral'		Variant, bestemmer fargen på tag
saturation	'emphasized' | 'subtle' | 'default' = 'emphasized'		Saturation - Hvor mettet fargen på tooltip er