ToolTip avanzado compuesto

---

16-03-2024

 

ToolTip avanzado compuesto es un ToolTip que se configura con tooltip_av_compuesto.css.

Deriva directamente de ToolTip_av_simple al que se le ha añadido y adaptado código de ToolTip avanzado de FalconMasters hasta obtener los resultados del ejemplo.

Su característica principal es que puede incluir imágenes al igual que ToolTip avanzado simple.

Su nombre es tooltip_ac para evitar interferencias con otros ToolTips.

Es necesario utilizar lo siguiente cuando vamos a hacer uso de ToolTip_ac:

<link href="/css/tooltip_av_compuesto" rel="stylesheet" type="text/css"> <!-- Configurar ToolTip avanzado compuesto -->

Se puede utiliar de forma Top, Bottom, Left y Right al igual que los ToolTips que hemos visto anteriormente pero, en este caso y debido a su gran tamaño, es recomendable utilizar solamenteTop o Bottom.

Estoy trabajando a fecha de hoy en un JavaScript para perfeccionar su centrado.

En el ejemplo, a continuación, se usa el siguiente código en un ToolTip avanzado compuesto horizontal:

Dependiendo de la ubicación deseada de tooltip_ac utilizaremos la clase:

• tooltip_ac top encima
• tooltip_ac bottom abajo
• tooltip_ac left izquierda
• tooltip_ac right derecha

Podemos utilizar el ToolTip avanzado compuesto de tres maneras diferentes:

• Como lo hacemos habitualmente con el ToolTip avanzado simple
• Modo Vertical: Es como está configurado por defecto. La imagen aparece en la parte superior y los textos en la inferior.
• Modo Horizontal: La imagen aparece en la parte izquierda y los textos en la derecha.

Diferencias de clases entre Modo vertical y horizontal:

Además, cuando trabajamos en horizontal es necesario añadir después de la clase container la propiedad CSS flex-direction: row

Ejemplos:

El ancho es configurable en todo momento insertando después de la clase container el estilo con el ancho, lo que permite utilizar ToolTips de diferentes medidas.

Como ejemplo:

Mi CSS tiene una configuración por defecto para width: 31.25em => para un ancho de 500 px.

 

Ejemplos horizontales:

 

 

 

 

 

 

Ejemplos verticales:

 

 

 

 

 

Utilizando ToolTip avanzado compuesto modo ToolTip avanzado simple configurando la anchura:

 

Texto con el atributo href" ": Activar ToolTip_av_simple Top Hola, que somos mucha gente para ver el tooltip_ac con imagen width: 20em

Texto con el atributo href" ": Activar ToolTip_av_simple Bottom Hola, que somos mucha gente para ver el tooltip_ac con imagen width: 20em

Texto con el atributo href" ": Activar ToolTip_av_simple Left Hola, que somos mucha gente para ver el tooltip_ac con imagen width: 12em

Texto con el atributo href" ": Activar ToolTip_av_simple Right Hola, que somos mucha gente para ver el tooltip_ac style="width: 12em" con imagen width: 12em

Texto con el atributo href" ": Activar ToolTip_av_simple Right ToolTip con un style="width: 12em" Sólo texto width: 7.5em

Texto con el atributo href" ": Activar ToolTip_av_simple Right ToolTip con un style="width: 12em" Sólo texto width: 12em

Texto con el atributo href" ": Activar ToolTip_av_simple Right ToolTip con un style="width: 12em" Sólo texto width: 31.5em

 

Utilizando ToolTip avanzado compuesto modo ToolTip avanzado simple y combinado:

 

Podemos combinar dos imágenes y otro texto más. Se consigue utilizando por una parte el texto y la imagen que se utiliza en el ToolTip avanzado simple y luego rellenamos también las clases del modo compuesto. Sólo admite trabajar el modo vertical y aquí dejo unos ejemplos:

 

 

 

 

Vea también

• Popover avanzado utilizando Grid