Tooltip em quase todo o fórum

por Luis Edit 18.06.13 19:04

Qual é minha questão:
https://ajuda.forumeiros.com/t80634-tutorial-tooltip-no-forum

Queria saber porque não funcionou no meu fórum. Fiz tudo como no tutorial. Adicionei o JavaScript, apliquei em todas as páginas. Adicionei também o CSS e validei. Verifiquei se estava funcionando em alguma parte do fórum, e não funcionou em nenhuma.

E não acho que seja conflito entre códigos JavaScript, fiz o teste em outro fórum em Invision e não funcionou.

Triste

Endereço do meu fórum:
http://rocknforum.ativoforum.com

Versão do fórum:
INVISION

por Sennior 18.06.13 19:15

Olá,

O senhor testou apenas nas versões Invision? Talvez o problema seja por causa da versão... Poderia ver se dá exito em outros formatos amigo?

Abraços.

por Luis Edit 18.06.13 19:20

Também não funcionou na versão PunBB.

por MateusA 18.06.13 22:33

Olá!

Spoiler:

tooltips estilo green

uma versão modificada do preto comum. Espero que você goste. também colocou uma nova variante para diferenciar um pouco da comum

--> Tutoriais, dicas e astúcias <-- tooltips estilo green

1º - colocar o script Painel de administração> Módulos> HTML e javascript> javascript. copiar o primeiro script com o nome de tooltips Tooltip em quase todo o fórum Tooltips-3e0d376

Tooltip em quase todo o fórum Tooltips-3e0d376

Código:: // tipsy, facebook style tooltips for jquery // version 1.0.0a // (c) 2008-2010 jason frame [jason@onehackoranother.com] // releated under the MIT license (function($) { function fixTitle($ele) { if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') { $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title'); } } function Tipsy(element, options) { this.$element = $(element); this.options = options; this.enabled = true; fixTitle(this.$element); } Tipsy.prototype = { show: function() { var title = this.getTitle(); if (title && this.enabled) { var $tip = this.tip(); $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title); $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); var pos = $.extend({}, this.$element.offset(), { width: this.$element[0].offsetWidth, height: this.$element[0].offsetHeight }); var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight; var gravity = (typeof this.options.gravity == 'function') ? this.options.gravity.call(this.$element[0]) : this.options.gravity; var tp; switch (gravity.charAt(0)) { case 'n': tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; break; case 's': tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; break; case 'e': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}; break; case 'w': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}; break; } if (gravity.length == 2) { if (gravity.charAt(1) == 'w') { tp.left = pos.left + pos.width / 2 - 15; } else { tp.left = pos.left + pos.width / 2 - actualWidth + 15; } } $tip.css(tp).addClass('tipsy-' + gravity); if (this.options.fade) { $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity}); } else { $tip.css({visibility: 'visible', opacity: this.options.opacity}); } } }, hide: function() { if (this.options.fade) { this.tip().stop().fadeOut(function() { $(this).remove(); }); } else { this.tip().remove(); } }, getTitle: function() { var title, $e = this.$element, o = this.options; fixTitle($e); var title, o = this.options; if (typeof o.title == 'string') { title = $e.attr(o.title == 'title' ? 'original-title' : o.title); } else if (typeof o.title == 'function') { title = o.title.call($e[0]); } title = ('' + title).replace(/(^\s*|\s*$)/, ""); return title || o.fallback; }, tip: function() { if (!this.$tip) { this.$tip = $(' ').html(' '); } return this.$tip; }, validate: function() { if (!this.$element[0].parentNode) { this.hide(); this.$element = null; this.options = null; } }, enable: function() { this.enabled = true; }, disable: function() { this.enabled = false; }, toggleEnabled: function() { this.enabled = !this.enabled; } }; $.fn.tipsy = function(options) { if (options === true) { return this.data('tipsy'); } else if (typeof options == 'string') { return this.data('tipsy')[options](); } options = $.extend({}, $.fn.tipsy.defaults, options); function get(ele) { var tipsy = $.data(ele, 'tipsy'); if (!tipsy) { tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options)); $.data(ele, 'tipsy', tipsy); } return tipsy; } function enter() { var tipsy = get(this); tipsy.hoverState = 'in'; if (options.delayIn == 0) { tipsy.show(); } else { setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn); } }; function leave() { var tipsy = get(this); tipsy.hoverState = 'out'; if (options.delayOut == 0) { tipsy.hide(); } else { setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut); } }; if (!options.live) this.each(function() { get(this); }); if (options.trigger != 'manual') { var binder = options.live ? 'live' : 'bind', eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus', eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'; this[binder](eventIn, enter)[binder](eventOut, leave); } return this; }; $.fn.tipsy.defaults = { delayIn: 0, delayOut: 0, fade: false, fallback: '', gravity: 'n', html: false, live: false, offset: 0, opacity: 0.8, title: 'title', trigger: 'hover' }; // Overwrite this method to provide options on a per-element basis. // For example, you could store the gravity in a 'tipsy-gravity' attribute: // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); // (remember - do not modify 'options' in place!) $.fn.tipsy.elementOptions = function(ele, options) { return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; }; $.fn.tipsy.autoNS = function() { return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n'; }; $.fn.tipsy.autoWE = function() { return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w'; }; })(jQuery);

2º - Coloque segundo script variáveis Painel de administração> Módulos> HTML e javascript> javascript. criar outro javascript copiar o segundo script com o nome de tooltips variáveis Tooltip em quase todo o fórum Variables-3e0d382

Tooltip em quase todo o fórum Variables-3e0d382

Código:: $(document).ready(function(){ $(function() { $('a').tipsy({fade: true, gravity: 's'}); $('.i_icon_quote').tipsy({fade: true, gravity: 's'}); $('.i_icon_edit').tipsy({fade: true, gravity: 's'}); $('.i_icon_delete').tipsy({fade: true, gravity: 's'}); $('.i_icon_ip').tipsy({fade: true, gravity: 's'}); $('.i_icon_profile').tipsy({fade: true, gravity: 's'}); $('.i_icon_pm').tipsy({fade: true, gravity: 's'}); $('.topic-title').tipsy({fade: true, gravity: 's'}); $('.i_post').tipsy({fade: true, gravity: 's'}); $('.i_reply').tipsy({fade: true, gravity: 's'}); $('.button2').tipsy({fade: true, gravity: 's'}); }); });

3º - Coloque css en su hoja de estilo Painel de administração> Visualization> Imagem e cores> cor> css cole o css e aceitar

Código:: .tipsy { padding: 5px; font-size: 11px; position: absolute; text-shadow: none; z-index: 999; } .tipsy-inner { padding: 8px 8px 8px 8px; background-color: black; color: white; max-width: 200px; text-align: center; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); background: rgb(119, 141, 30) url(http://cuul.tk/img/gradient.png) repeat-x 0 -150px; } .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-arrow { position: absolute; background: url('http://img90.xooimage.com/files/7/0/c/sin-t-tulo-3cd9d11.gif') no-repeat top left; width: 9px; height: 5px; } .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; } .tipsy-nw .tipsy-arrow { top: 0; left: 10px; } .tipsy-ne .tipsy-arrow { top: 0; right: 10px; } .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; } .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; } .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; } .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; } .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }

4º - Resultado Tooltip em quase todo o fórum Sin-t-tulo-3e0d212

Anonimo

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: tooltips estilo green

Faça o tutorial acima, escrito por um membro.

Até mais.

Tooltip em quase todo o fórum

Tooltip em quase todo o fórum

Re: Tooltip em quase todo o fórum

Re: Tooltip em quase todo o fórum

Re: Tooltip em quase todo o fórum