Efeito Tooltip

Detalhes da questão

Endereço do fórum: http://vgnfamily.forumais.com
Versão do fórum: PunBB

Descrição

Boa noite.

Olá, Gostaria de por um tooltip em meu fórum. Imagem:
https://i.imgur.com/qBBcshp.jpg

Esse efeito é do fórum do while, gostaria de saber se pode disponibilizar o código?
Hoje eu acabei vendo um tutorial parecido com este porem gostei mais do estilo do while.
Fórum: http://bestweb.forumais.com/

Olá,

Veja este tutorial:
-> https://ajuda.forumeiros.com/t80634-tutorial-tooltip-no-forum

Ative-o, para que possamos modificar a aparência do tooltip (se é isso que o incomoda).

Luiz~ escreveu:Olá,

Veja este tutorial:
-> https://ajuda.forumeiros.com/t80634-tutorial-tooltip-no-forum

Ative-o, para que possamos modificar a aparência do tooltip (se é isso que o incomoda).

Pronto

Olá, tudo bem?

Adicione este código ao final de sua CSS:

Código:

.tipsy-arrow {
  background-image: none!important;
  width: 12px;
  height: 12px;
  background-color: #fff;
  bottom: -1px!important;
  margin-left: -6px!important;
  transform: rotate(45deg);
}

.tipsy.tipsy-s {
  opacity: 1!important;
}

.tipsy-inner {
  background-color: #fff!important;
  color: #444!important;
  padding: 6px 12px!important;
  font-size: 13px;
  box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.85);
  margin-top: -20px;
}

Se você quiser que quase tudo em seu fórum tenha tooltip, adicione este código JavaScript, com investimento em todas as páginas:

Código:

(function ($) {
  'use strict';

  $(function () {
    $('[title]')
      .addClass('tool-tip');
  });

}(jQuery));

Ficou assim: teria como diminuir um pouco a sombra? e por a mesma seta que tem na do while? não sei se é assim que se chama me esqueci o nome da função enfim.


Por a seta embaixo:

Olá,

Troque o código CSS que passei-lhe anteriormente por este:

Código:

.tipsy-arrow {
  background-image: none!important;
  width: 12px!important;
  height: 12px!important;
  background-color: #fff!important;
  bottom: -1px!important;
  margin-left: -6px!important;
  transform: rotate(45deg)!important;
}
 
.tipsy.tipsy-s {
  opacity: 1!important;
}
 
.tipsy-inner {
  background-color: #fff!important;
  color: #444!important;
  padding: 6px 12px!important;
  font-size: 13px!important;
  box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.85)!important;
  margin-top: -20px!important;
}

Obg! Pode fechar.

Disponha.

---

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