Staffer Group BR™

Fórum interativo totalmente gratuito!


 VisualizaçõesPermissão deste fórum:
Não podes responder a tópicos


CurtirDiretório deste fórum:
Fóruns » Arquivos » Lixeira

#1
 D'Leandro™

D'Leandro™
Fundador
ø Tópico bloqueado Tutori10  [Tutorial] Tooltip UNO

Descrição
Este tooltip é bem complexo, ele tem um design simples e totalmente útil, pode ser aplicado em qualquer site com suporte CSS e JavaScript.

Funcionalidade: PunBB, PhpBB2, PhpBB3, Invision, Blog e Site


--> Código CSS <--
Painel de Controle  Seta  Visualização  Seta   Imagens e Cores  Seta   Cores  Mover  Folha de estilo CSS
Código:
/*Tooltip UNO por Douglas Leandro e SGBR™️*/label {position: relative;}.box { z-index: 999; width: 250px; position: absolute; left: 0; top: 0; -webkit-backface-visibility: hidden; border-radius: 2px; background: #f1f1f1; border: 1px solid #ddd; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 5px; margin: 40px 5px; -webkit-transform: scale(0) skew(50deg); -moz-transform:    scale(0) skew(50deg); -ms-transform:     scale(0) skew(50deg); -o-transform:      scale(0) skew(50deg); -webkit-transform-origin: 0px -30px; -moz-transform-origin:    0px -30px; -ms-transform-origin:     0px -30px; -o-transform-origin:      0px -30px; -webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s; -moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s; -ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s; -o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;}.box:after {content: ""; position: absolute; bottom: 100%;left: 30px;border-bottom: 20px solid #eee;border-left:   14px solid transparent;border-right:  14px solid transparent;width:  0;height: 0;}.popUpControl:checked ~ label > .box {opacity: 0.9;-webkit-transform: scale(1) skew(0deg);-moz-transform:    scale(1) skew(0deg);-ms-transform:     scale(1) skew(0deg);-o-transform:      scale(1) skew(0deg);}.popUpControl {display: none;}.box img {  border-radius: 2px;}#doggiezzz:checked ~ label > span:first-child {display: none;}.link {text-decoration: none;color: #1E90FF;}.title {display: block;margin-top: -20px;text-align: center;font: bold 16px Sans-Serif;text-decoration: none;}.copy a {text-decoration: underline;}.copy {text-decoration: none;padding: 0;margin: 0;}/*StafferGroupBR.StuninG.NeT*/
--> Código Java Script <--
Painel de Controle  Seta  Módulos  Seta   HTML & JavaScript  Seta   Gestão dos códigos JavaScript  Mover  
Adicionar novo Códig
Título * : Opcional
Investimento :  Em todas as paginas
Código JavaScript * : Cole o código
Código:
jQuery(document).ready(function() {
jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="ppPClickv();return false"><img height="11" src="http://i83.servimg.com/u/f83/17/71/75/73/help10.gif" width="11" /> Popup Clicavel</button>');
});
function ppPClickv(){
bbfontstyle('<input type="checkbox" id="linkie" class="popUpControl"><label for="linkie" class="link"><span>TEXTO_AQUI</span><span class="box"><span class="copy">CONTEUDO_AQUI</span></span></label>','');selectWysiwyg(this,'other');return false}


Demonstração


Desenvolvido por D'Leandro™️ | CSS-Tricks
Editado e Postado por Copyright® 2012 Staffer Group BR™️

#2
 ®'Martins

®'Martins
Membro
Tutorial Aceito;
Este tutorial foi aceito e movido para a área correspondente!

#3
 Otaku Chan

Otaku Chan
Membro
Achei isso bem legal, mas ja existem dezenas de tooltips na internet...

#4
 Conteúdo patrocinado