Prime Institute
¡Caminando hacia el éxito!

Aprende en Comunidad

Avalados por :

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

Crear
  • Creado 01/03/2024
  • Modificado 01/03/2024
  • 189 Vistas
0
Cargando...

Hola,

Estoy intentando obtener un cuadro emergente al pasar el cursor sobre un texto.

Estoy utilizando este sitio web como referencia: http://www.scientificpsychic.com/etc/css-mouseover.html

He implementado el código CSS para la clase dropt en un archivo CSS y lo he subido al servidor y lo he seleccionado correctamente como el CSS personalizado para el Informe.

He colocado el dropt en la Clase CSS el siguiente código en el Estilo CSS pero no funciona.

<span class="dropt" title="Título para el cuadro emergente">Texto de Zona Caliente

<span style="width:500px;">Texto emergente</span>

</span>

¿Alguien sabe qué estoy haciendo mal o tiene alguna otra idea de cómo implementar un cuadro emergente al pasar el cursor sobre un texto?

Gracias,

Anders

SAP CSS
Pedro Pascal
Se unió el 07/03/2018
Responder
Pinterest
Telegram
Linkedin
Whatsapp

4 Respuestas

0
Cargando...

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:

  1. 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"
  2. 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.
  3. Ahora coloca las 2 definiciones de css en este archivo de css personalizado:
  4. 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):
  5. Ahora vincula este archivo css en tu aplicación bi junto con la extensión de archivo: custom.css:
  6. 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

custom_css_file_in_repository_folder.png link_css_file_in_bi_app.png
Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019
Agregar
0
Cargando...

¡Gracias David!

Saludos,

Sri

Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019
Agregar
0
Cargando...

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
0
Cargando...

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

Partners:

Libro de reclamaciones Libro de reclamaciones

contacto@primeinstitute.com

(+51) 1641 9379
(+57) 1489 6964

© 2024 Copyright. Todos los derechos reservados.

Desarrollado por Prime Institute

¡Hola! Soy Diana, asesora académica de Prime Institute, indícame en que curso estas interesado, saludos!
Hola ¿Puedo ayudarte?