Beacon Tooltip

Komponent, der placerer en beacon i undervisningen, enten uafhængigt eller knyttet til et target. Når der svæves eller klikkes på fyret, vises et tooltip.

Indstillinger

• title | (string|node): titel, der skal vises øverst i tooltip'et. Default: none.
• content | (string|node): indhold af tooltip. Default: 'content comes here...'.
• event | string: hvis indstillet til click, skiftes tooltip til at være aktiv, når der klikkes på fyret; hvis indstillet til hover, aktiveres tooltip ved at svæve. Default: 'click'.
• placement | string: placering af værktøjstip i forhold til target (enten top, top-start, top-end, bottom, bottom-end, left, left-start, left-end, right, right-start, right-end, auto, eller center). Default: 'left'.
• target | string: klasse eller ID-selektor for det element, som tooltip skal knyttes til. Default: ''.
• offset | number: afstand mellem tooltip og target i pixel. Default: 15.
• onChange | function: callback, der påkaldes ved ændring af værktøjstipens tilstand. Modtager to argumenter: action (open eller close) og de overgivne props.. Default: onChange() {}.

Eksempler

Live Editor

<BeaconTooltip content="Body of the tooltip..." title="Title comes here..." event="hover" placement="right" />

<BeaconTooltip
    content="Body of the tooltip..."
    title="Title comes here..."
    event="hover"
    placement="right"
/>

Resultat

ReferenceError: Provider is not defined