Tooltip
<plz-tooltip> | PlzTooltip
El componente
Desplaza el cursor por el
Ejemplos
Posiciones para el tooltip
Usaremos el atributo position para elegir la posición del tooltip entre "top", "bottom", "right" y "left".
Ajustaremos la posición de nuestro componente para adaptarse a cualquier situación.
Desplaza el cursor por el
Desplaza el cursor por el
Desplaza el cursor por el
Desplaza el cursor por el
Variante text y variante link para el tooltip
Usaremos el atributo variant para elegir entre "text" o "link".
Este componente suele usarse de dos formas, una es la que hemos visto anteriormente, donde aparece información brebe y relevante para el contexto y otra es usándolo para anclar enlaces. En el siguiente ejemplo aparecen los dos tipos, uno con solo texto y otro con link hacia la documentación del icon button.
Como se puede observar se pueden utilizar otros elementos que no sean texto para que sean nuestro tooltip. En este caso un icon button.
Para asegurarnos que el link se abre como queremos, haremos uso del atributo target, en este podremos elegir entre "_blank", "_self", "_parent", "_top" y "framename". En el caso de no hacer uso de este atributo, se utilizará por defecto "_self" (se abrirá la página en el mismo marco en el que se ha hecho el click).
Atributos
Nombre | Descripción | Posibilidades | Por defecto |
---|---|---|---|
variant | Distintas variantes del componente | 'text' - 'link' | 'text' |
text | Texto que se mostrará dentro del tooltip | 'ejemplo texto' | |
position | Posiciones para el tooltip respecto al elemento | 'top' - 'bottom' - 'right' - 'left' | 'top' |
link | Url a la que se accedera a partir del tooltip | 'docs-ejemplo.html' | |
Distintas formas de mostar el link del componente | '_self' - '_blank' - '_parent' - '_top' - 'framename' | '_self' |