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>

Spor

Navn	Beskrivelse
(standard)	The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
content	The content to render in the tooltip. Alternatively, you can use the `content` attribute.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-show	SlTooltip	Emitted when the tooltip begins to show.
sl-after-show	SlTooltip	Emitted after the tooltip has shown and all animations are complete.
sl-hide	SlTooltip	Emitted when the tooltip begins to hide.
sl-after-hide	SlTooltip	Emitted after the tooltip has hidden and all animations are complete.

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
defaultSlot	HTMLSlotElement	SlTooltip
body	HTMLElement	SlTooltip
popup	SlPopup	SlTooltip
content	string = ''	SlTooltip	The tooltip's content. If you need to display HTML, use the `content` slot instead.
placement	| 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' = 'top'	SlTooltip	The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
disabled	boolean = false	SlTooltip	Disables the tooltip so it won't show when triggered.
distance	number = 8	SlTooltip	The distance in pixels from which to offset the tooltip away from its target.
open	boolean = false	SlTooltip	Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
skidding	number = 0	SlTooltip	The distance in pixels from which to offset the tooltip along its target.
trigger	string = 'hover focus'	SlTooltip	Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
hoist	boolean = false	SlTooltip	Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleOpenChange			SlTooltip
handleOptionsChange			SlTooltip
handleDisabledChange			SlTooltip
show			SlTooltip	Shows the tooltip.
hide			SlTooltip	Hides the tooltip

Deler

Navn	Beskrivelse
base	The component's base wrapper, an `<sl-popup>` element.
base__popup	The popup's exported `popup` part. Use this to target the tooltip's popup container.
base__arrow	The popup's exported `arrow` part. Use this to target the tooltip's arrow.
body	The tooltip's body where its content is rendered.

Spesifikke CSS-variabler for komponent

Navn	Beskrivelse
--max-width	The maximum width of the tooltip before its content will wrap.
--hide-delay	The amount of time to wait before hiding the tooltip when hovering.
--show-delay	The amount of time to wait before showing the tooltip when hovering.