Hopp til innhold

Tooltip

En tooltip lar oss skjule informasjon på en måte som samtidig gjør den tilgjenglig i kontekst for de brukerne som ser etter den.

EksemplerBrukKode

Kom i gang

Installer
npm i @fremtind/jkl-tooltip-react
Bruk
import { Tooltip } from "@fremtind/jkl-tooltip-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-tooltip/tooltip.min.css";



// Du må også importere stilarket til ikonene for å vise komponenten riktig:

import "@fremtind/jkl-icons/icons.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-tooltip/tooltip";

@use "@fremtind/jkl-icons/icons";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

Tooltip
Egenskaper
Visning
Tema
Tetthet
const [copied, setCopied] = React.useState(false);

const kontonummer = "16024454979";

const initialPlacement = 'top';



function copyToClipboard() {

  navigator.clipboard.writeText(kontonummer);

  setCopied(true);

  setTimeout(() => setCopied(false), 2000);

}



return (

  <p>

    Kontonummer:{" "}

    <Tooltip placement={initialPlacement} delay={250}>

      <TooltipTrigger onClick={copyToClipboard}>

        {formatKontonummer(kontonummer)}

      </TooltipTrigger>

      <TooltipContent>

        {copied ? (

          <span aria-live="assertive">Kopiert</span>

        ) : (

          "Klikk for å kopiere til utklippstavlen"

        )}

      </TooltipContent>

    </Tooltip>

  </p>

);
PopupTip
Egenskaper
Visning
Tema
Tetthet
const initialPlacement = 'top';



return (

  <p>

    Du betaler 348 kr/mnd{" "}

    <PopupTip

      placement={initialPlacement}

      content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(

        4176

      )}.`}

    />

  </p>

);

React API

Her finner du en oversikt over props på komponentene i pakken.