Passa al contenuto principale

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
Risultato
Ultimo aggiornamento il {data} da Planeshifter