[Tutorial] Tooltip UNO |
Painel de Controle Visualização Imagens e Cores Cores 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*/
Painel de Controle Módulos HTML & JavaScript Gestão dos códigos JavaScript
Título * : Opcional
Investimento :
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}
Desenvolvido por D'Leandro | CSS-Tricks
Editado e Postado por Copyright® 2012 Staffer Group BR
Editado e Postado por Copyright® 2012 Staffer Group BR