Prime Institute
¡Caminando hacia el éxito!

Aprende en Comunidad

Avalados por :

Como criar um pop-up ao passar o cursor sobre um texto com CSS - Guia passo a passo

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

Olá,

Estou tentando obter uma caixa de pop-up ao passar o cursor sobre um texto.

Estou utilizando este site como referência: http://www.scientificpsychic.com/etc/css-mouseover.html

Implementei o código CSS para a classe dropt em um arquivo CSS e o enviei para o servidor, selecionando-o corretamente como o CSS personalizado para o Relatório.

Coloquei o dropt na Classe CSS com o seguinte código no Estilo CSS, mas não está funcionando.

<span class="dropt" title="Título para a caixa de pop-up">Texto da Área Sensível

<span style="width:500px;">Texto pop-up</span>

</span>

Alguém sabe o que estou fazendo de errado ou tem alguma outra ideia de como implementar uma caixa de pop-up ao passar o cursor sobre um texto?

Obrigado,

Anders

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

4 Respuestas

0
Cargando...

Olá Raoul,

A resposta curta para sua pergunta: você os coloca no seu arquivo css personalizado, que geralmente é colocado na pasta do repositório do seu aplicativo bi para depois poder vinculá-lo ao seu aplicativo bi e fazer com que ele utilize esse código css.

Primeira solução:

  1. Você tem 2 componentes de texto e encontrou os "ids" de seus divs pais no html gerado: no seu caso, o "Texto padrão (não texto emergente)" está associado ao id "__container0" e o "Texto emergente (exibido apenas quando o usuário passa o mouse sobre o Texto padrão)" está associado ao id "__container1"
  2. Crie um arquivo css personalizado com o nome, por exemplo: "custom.css". Você pode nomeá-lo como quiser, apenas certifique-se de que a extensão/tipo de arquivo seja .css e não .txt.
  3. Agora coloque as 2 definições de css neste arquivo css personalizado:
  4. Salve este arquivo na pasta do repositório do seu aplicativo bi (nota: o tipo de arquivo é Documento de Estilo em Cascata):
  5. Agora vincule este arquivo css ao seu aplicativo bi juntamente com a extensão do arquivo: custom.css:
  6. Salve seu aplicativo bi e execute-o (mostre-o no navegador). Para resolver problemas com o armazenamento em cache do arquivo css e não ver as alterações de css no seu navegador, leia isso: Como adicionar um arquivo de CSS personalizado?

Atenciosamente,

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

Obrigado David!

Cumprimentos,

Sri

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

Olá David,

Estou tentando fazer sua primeira solução funcionar. Encontrei os IDs dos contêineres. Pode me dizer onde colocar as duas linhas que começam com:

#__container1 ...

#__container0: ...

Saudações,

Raoul

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

Ol·,

Aqui est· um exemplo simples do que pode ser feito em um aplicativo de Design Studio BI.

Meu exemplo tem o seguinte esquema para demonstrar 2 formas diferentes de exibir um texto adicional quando um usu·rio passa o mouse sobre algum texto:

Quando abro este aplicativo bi no IE:

Quando passo o mouse sobre o primeiro texto, aparece um texto emergente simples (quando o mouse sai do texto ou do popup, o popup È ocultado):

Quando passo o mouse sobre o segundo texto, tambÈm aparece um texto emergente simples (quando o mouse sai do texto ou do popup, o popup È ocultado):

Utilizei o seguinte css simples apenas para demonstrar a possibilidade de exibir/ocultar texto ao passar o mouse:

Para a primeira forma (primeiras 2 linhas) - usando apenas os ids, n„o È necess·rio criar suas prÛprias classes css personalizadas, apenas È necess·rio encontrar os ids dos componentes de texto desejados e substituir "__container0" pelo id do texto que È exibido e que vocÍ quer que seja exibido ao passar o mouse, e "__container1" pelo id do texto que deve ser exibido como um popup.

Aqui uma captura de tela onde est„o esses ids no meu cÛdigo html:

Para entender melhor o cÛdigo css (seletores) para a 2¦ soluÁ„o utilizando um componente de painel e classes css personalizadas, È assim que a ˙rvore html se parece:

Aqui uma vis„o geral das classes css que atribuÌ aos componentes no esquema (em negrito as que s„o realmente utilizadas neste exemplo 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 obter mais informaÁıes sobre isso, vocÍ pode pesquisar no Google: "mostrar div ao passar o mouse com apenas css" - vocÍ encontrar· informaÁıes ˙teis no StackOverflow.

SaudaÁıes

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?