Cómo crear un cuadro emergente al pasar el cursor sobre un texto con CSS - Guía paso a paso | Preguntas

Hola Raoul,

La respuesta corta a tu pregunta: los colocas en tu archivo de css personalizado que generalmente se coloca en la carpeta del repositorio de tu aplicación bi para luego poder vincularlo a tu aplicación bi y que esta utilice este código css.

Primera solución:

Tienes 2 componentes de texto y has encontrado los "ids" de sus divs padres en el html generado: en tu caso, el "Texto estándar (no texto emergente)" está asociado con el id "__container0" y el "Texto emergente (mostrado solo cuando el usuario pasa el ratón sobre el Texto estándar)" está asociado con el id "__container1"
Crea un archivo de css personalizado con el nombre, por ejemplo: "custom.css". Puedes nombrarlo como quieras, solo asegúrate de que la extensión/tipo de archivo sea .css y no .txt.
Ahora coloca las 2 definiciones de css en este archivo de css personalizado:
Guarda este archivo en la carpeta del repositorio de tu aplicación bi (nota: el tipo de archivo es Documento de Hoja de Estilo en Cascada):
Ahora vincula este archivo css en tu aplicación bi junto con la extensión de archivo: custom.css:
Guarda tu aplicación bi y ejecútala (muéstrala en el navegador). Para resolver problemas con el almacenamiento en caché del archivo css y no ver los cambios de css en tu navegador, lee esto: ¿Cómo agregar un archivo de CSS personalizado?

Saludos cordiales,

David

Agregar

¡Gracias David!

Saludos,

Sri

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

Hola David,

Estoy tratando de hacer funcionar tu primera solución. Encontré los IDs de los contenedores. ¿Puedes decirme dónde colocar las dos líneas que comienzan con:

#__container1 ...

#__container0: ...

Saludos,

Raoul

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

Hi,

Aquí tienes un ejemplo simple de lo que se puede hacer en una aplicación de Design Studio BI.

Mi ejemplo tiene el siguiente esquema para demostrar 2 formas diferentes de mostrar un texto adicional cuando un usuario pasa el mouse sobre algún texto:

Cuando abro esta aplicación bi en IE:

Cuando paso el mouse sobre el primer texto, aparece un texto emergente simple (cuando el mouse sale del texto o del popup, el popup se oculta):

Cuando paso el mouse sobre el segundo texto, también aparece un texto emergente simple (cuando el mouse sale del texto o del popup, el popup se oculta):

Utilicé el siguiente css simple solo para demostrar la posibilidad de mostrar/ocultar texto al pasar el mouse:

Para la primera forma (primeras 2 filas) - usando solo los ids, no necesitas crear tus propias clases css personalizadas, solo necesitas encontrar los ids de los componentes de texto deseados y sustituir "__container0" con el id del texto que se muestra y quieres que se muestre al pasar el mouse, y "__container1" con el id del texto que debería mostrarse como un popup.

Aquí una captura de pantalla donde se encuentran estos ids en mi código html:

Para comprender mejor el código css (selectores) para la 2ª solución utilizando un componente de panel y clases css personalizadas, así es como se ve el árbol html:

Aquí una descripción general de las clases css que asigné a los componentes en el esquema (en negrita las que se utilizan realmente en este ejemplo de css):

TEXT_1 - c_text1

TEXT_2 - c_popup1

PANEL_1 - c_txt_popup_panel1

TEXT_3 - c_text3

TEXT_4 - c_popup4

Para obtener más información al respecto puedes buscar en Google: "mostrar div al pasar el mouse con solo css" - encontrarás información útil en StackOverflow.

Saludos

David

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

Etiquetas más populares

Ver todo

Cómo crear un cuadro emergente al pasar el cursor sobre un texto con CSS - Guía paso a paso

4 Respuestas

Etiquetas más populares

Preguntas más populares

Partners: