Ir para conteúdo
Daniel Francisco

Exibe uma caixa de msg ao passa mouse

Recommended Posts

Olá boa noite...

queria muito pode adicionar no meu site uma função que exibe uma img 

e quando e passado o mouse em cima exibe uma caixa de diálogo como exemplo.. 

 

https://prnt.sc/j2bb6x

 

queria por uma imagem e quando eu colocasse o mouse por cima, exibisse uma caixa dessas aí..

 

desde já obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Esse efeito é conhecido como tooltip ou dica de contexto.
A técnica para criar o efeito é explicada neste tutorial
Ver o tooltip em ação em https://jsfiddle.net/maujor/9v6rfmbg/1/

Veja a seguir os códigos que criei para a demonstração no JsFiddle com tooltip em imagem:

<div class="container">
  <img src="http://via.placeholder.com/400x300/000000/ffffff">
  <div class="conteudo">
    <p>Este é o conteúdo que aparece sobre a imagem e bla bla 
       bla bla bla bla bla bla bla bla bla bla.</p>
  </div>
</div>
/* adapte os valores CSS às suas necessidades */
.container {
  display: inline-block;
  position: relative;
  cursor: help;
}
.conteudo {
  width: 400px; 
  position: absolute;
  top: 0;
  left: 0;
}
.conteudo > p {
  font: 20px sans-serif;
  color: green;
  padding: 20px;
  }
.container p { display: none;}  
.container:hover p  { display: block;}

 

  • Gostei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • Por jgasper
      Boa tarde, preciso de ajuda, fiz o site para minha empresa de advocacia mas nao sei transformar em mobile, peguei template pronto e fiz modificações, nao sou bom em HTML, foi o que consegui fazer. Alguem pode me ajudar a transformar ele em responsivo? só fazendo o menu funcionar para celular?
       
      Os arquivos do site estao em: https://mega.nz/#!AEAUxa5Z!EwFVVhgaJeJg6DTFpzUfi0vnrULPzI8YI9I0-XJwaE8
       
      Agradeço desde ja.
    • Por mpcarvalho
      Estou com uma dúvida e revirei o forum e a internet e não achei solução.
       
      Criei um template em HTML para um APP hibrido, porem quando utilizado na versão mobile, ao clicar em qualquer link aparece uma marca de seleção antes de mudar de página. Gostaria de saber como remover isso. Segue imagens para explanar melhor minha dúvida.
       

    • Por Artes Ussler
      Bom dia
       
      Alguns navegadores sublinham ou trocam a cor dos números de telefones que estão no site.
       
      Como faço para remover isso?
       
      Se alguém puder ajudar, eu fico grato.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.