Beacon Tooltip

Componente che posiziona un faro nella lezione, indipendentemente o collegato ad un target. Facendo hovering o cliccando sul beacon, viene visualizzato un tooltip.

Opzioni

• title | (string|node): titolo da visualizzare nella parte superiore del tooltip. Default: none.
• content | (string|node): contenuto del tooltip. Default: 'content comes here...'.
• event | string: se impostato su click, il tooltip viene attivato quando si clicca sul beacon; se impostato su hover, il tooltip viene attivato tramite hovering. Default: 'click'.
• placement | string: posizionamento del tooltip relativo all'"obiettivo" (sia top', top-start', top-end', top-end', bottom', bottom-end', left', left-start', left-end', right', right-start', right-end', auto', o center'). Default: 'left'.
• target | string: selettore di classe o ID per l'elemento a cui collegare il tooltip. Default: ''.
• offset | number: distanza tra il tooltip e il target in pixel. Default: 15.
• onChange | function: richiamata al cambio di stato del tooltip. Riceve due argomenti: la azione (aperta o chiusa) e il props passato. Default: onChange() {}.

Esempi

Editore dal vivo

<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"
/>

Risultato

ReferenceError: Provider is not defined