Como faz este efeito?

Detalhes da questão

Endereço do fórum: http://www.libertytelecomctba.com.br/
Versão do fórum: Invision

Descrição

Olá Comunity!

Eu acessei este site > https://pt.surveymonkey.com/pricing/?ut_source=header e gostei do efeito quando passa o mouse nos "?". Alguém sabe me explicar como faço este efeito? Se possível, gostaria de adiciona-lo digamos no menu.

Olá,

Supomos o seguinte HTML:

Código:

<ul id="fa-custom-menu">
  <li class="fa-box">
    <a href="#">
      Texto <span class="fa-box-trigger">?</span>
    </a>
    <div class="fa-box-message">
      <a href="#" class="fa-box-trigger">X</a>
      O conteúdo da sua caixa de texto aqui.
    </div>
  </li>
</ul>

Adicione ao seu CSS:

Código:

.fa-box {
  position: relative;
}

.fa-box-trigger {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: #ccc;
  color: #fff;
  margin-left: 10px;
  border-radius: 50%;
  font-size: 10px;
  text-decoration: none;
  vertical-align: middle;
}

.fa-box-message {
  display: none;
  position: absolute;
  border: 5px #333 solid;
  width: 200px;
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  left: 100%;
  top: -10px;
  margin-left: 20px;
  background: #f9f9f9;
  box-sizing: border-box;
}

.fa-box-message:after {
   right: 100%;
   top: 15px;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: transparent;
   border-right-color: #333;
   border-width: 15px;
   margin-top: -15px;
}

.fa-box-open .fa-box-message {
  display: block;
}

.fa-box-message .fa-box-trigger {
  position: absolute;
  margin: 0;
  right: 10px;
  top: 10px;
}

E ao Javascript com Investimento em Todas as páginas:

Código:

/* globals jQuery */

(function($) {
  'use strict';
 
  $(function() {
    $('.fa-box-trigger').on('click', function() {
      $(this)
        .closest('.fa-box')
        .toggleClass('fa-box-open');
    });
  });
}(jQuery));


A caixa aparecerá a direita do elemento .fa-box, logo garanta que esse elemento tenha a largura correta para a caixa não aparecer longe do "?".

o/

Gostei!
Mas, o efeito só surge quando clico sobre o "?". No site, a caixa  aparece apenas ao passar o mouse sobre.

Aproposito vou aproveitar esse  código para fazer aquele efeito do botão chatbox.

Obrigado!

Eu sou meio contra ações em hover, uma porque usuários de tablets não conseguem executá-los e outra porque nem sempre o usuário queria que aquela ação ocorresse (no caso de passar o mouse acidentalmente por cima). MAS:

Código:

/* globals jQuery */
 
(function($) {
  'use strict';
 
  $(function() {
    $('.fa-box-trigger').on('hover', function() {
      $(this)
        .closest('.fa-box')
        .toggleClass('fa-box-open');
    });
  });
}(jQuery));

Muitos THANKS!
Aproposito, eu posso usar o outro código para a versão mobile/tablet

Obrigaaaaado!

Às ordens. o7

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".