Efeito Tooltip

Item: Efeito Tooltip
Rating: 1

por YouTube3 em 31/03/17, 07:59 pm

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:
http://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/

por **Luiz~** em 31/03/17, 08:07 pm

Olá,

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

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

Tchau

por YouTube3 em 31/03/17, 08:13 pm

@Luiz~ escreveu:Olá,

Veja este tutorial:
-> http://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

por **Luiz~** em 31/03/17, 08:43 pm

Olá, tudo bem? Piscada

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));

por YouTube3 em 31/03/17, 09:34 pm

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: Muito feliz

por **Luiz~** em 01/04/17, 10:09 am

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; }

por YouTube3 em 01/04/17, 11:37 am

Obg! Pode fechar.

por **Luiz~** em 01/04/17, 11:41 am

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

Fórum dos Fóruns Forumeiros

Efeito Tooltip

Efeito Tooltip

Detalhes da questão

Descrição

Re: Efeito Tooltip

Re: Efeito Tooltip

Re: Efeito Tooltip

Re: Efeito Tooltip

Re: Efeito Tooltip

Re: Efeito Tooltip

Re: Efeito Tooltip