palaze-web Palaze web Docs Github Empezando Componentes Button Card Colors Divider Footer Header Hero Menu Menu-dropdown Menu-item Section Showcase Sidebar Spinner Tooltip Design System Colores Tipografia Formas

Tooltip

<plz-tooltip> | PlzTooltip

El componentetooltipconsiste en un mensaje emergente que aparece en pantalla cuando el usuario pasa el cursor sobre un elemento concreto (hover).

Desplaza el cursor por eltextohasta encontrar el tooltip.

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 eltextohasta encontrar el tooltip.

Desplaza el cursor por eltextohasta encontrar el tooltip.

Desplaza el cursor por eltextohasta encontrar el tooltip.

Desplaza el cursor por eltextohasta encontrar el tooltip.

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).

Todo es tooltip

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'
target Distintas formas de mostar el link del componente '_self' - '_blank' - '_parent' - '_top' - 'framename' '_self'