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

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:

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"
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.
Agora coloque as 2 definições de css neste arquivo css personalizado:
Salve este arquivo na pasta do repositório do seu aplicativo bi (nota: o tipo de arquivo é Documento de Estilo em Cascata):
Agora vincule este arquivo css ao seu aplicativo bi juntamente com a extensão do arquivo: custom.css:
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

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

Obrigado David!

Cumprimentos,

Sri

Respondido el 15/04/2024

LUCIANO RIOJA GHIOTTO

Se unió el 13/07/2019

Agregar

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

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

Etiquetas más populares

Ver todo

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

4 Respuestas

Etiquetas más populares

Preguntas más populares

Partners: