[TUTORIAL] Botão ToolTip BBCode

**T-Lord**

Administrador

Mensagens : 9792
<b>Moedas</b>

Moedas : 234353
Reputação : 278

Botão Tooltip

Nesse tutorial estarei ensinando como criar um botão tooltip.

Adicionar ao css:

Código:: a.tooltip { outline:none; } a.tooltip strong { line-height:30px;} a.tooltip:hover { text-decoration:none;} a.tooltip span { z-index:10; display:none; padding:14px 20px; margin-top:-30px; margin-left:28px; line-height:16px; } a.tooltip:hover span{ display:inline; position:absolute; color:#111; border:1px solid #DCA; background:#fffAF0;} .callout { z-index:20; position:absolute; top:30px; border:0; left:-12px;} a.tooltip span { border-radius:4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 5px 5px 8px #CCC; -webkit-box-shadow: 5px 5px 8px #CCC; box-shadow: 5px 5px 8px #CCC; }

Expandir esta imagem
[TUTORIAL] Botão ToolTip BBCode Java

Código Javascript

Código:: jQuery(document).ready(function() { jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert();return false" style="color:blue">Tooltip</button>'); }); function alert(){ bbfontstyle('<a href="#" class="tooltip">Passe o Mouse.<span>Conteúdo','</span></a>');selectWysiwyg(this,'other');return false}

Resultado:
[TUTORIAL] Botão ToolTip BBCode Re10

1 [TUTORIAL] Botão ToolTip BBCode Sex 19 Abr 2013 - 18:18