Você não está conectado. Conecte-se ou registre-se

Efeito Toolip

Ir em baixo  Mensagem [Página 1 de 1]

1 Efeito Toolip em Ter Jun 26, 2018 2:28 pm

Houdini

avatar
Membro elite

[quadrado="Descrição"]Tenho um código de efeito toolip bem simples e funcional, porém quando troquei para a versão ModernBB da forumeiros, o mesmo não vêm funcionando bem. O código funciona da seguinte maneira.
Temos o li e dentro desse li tem uma img, ao passar o mouse por essa img o conteúdo dentro do data-content é mostrado em uma caixa flutuante. Mas não está funcionando e já tentei ajustar, porém não visualizo nada que possa fazer...

Código:

    <ul><li class="torso equippedItem" id="equipped_camisa"><img data-content="<span>Slot Torso</span><h2>Camisa Branca</h2><hr>" rel="tooltip" id="tip-w" src="https://kaizoku.zlx.com.br/_img/_it/it2/249.png"></li></ul>
Código:

jQuery(function(o) {
    o("*[rel=tooltip]").hover(function(t) {
        var e = o(this).data("content");
        o("body").append('<div class="tooltip">' + e + "</div>"), o(".tooltip").css({
                top: t.pageY - 10,
                left: t.pageX + 40
            }).fadeIn()
    }, function() {
        o(".tooltip").remove()
    }).mousemove(function(t) {
        o(".tooltip").css({
                top: t.pageY - 30,
                left: t.pageX + 10
            })
    })
});
[/quadrado]
[quadrado="Informações"]Fórum: [Você precisa estar registrado e conectado para ver este link.]
Versão: MODERNBB[/quadrado]

Ver perfil do usuário

2 Re: Efeito Toolip em Qui Jun 28, 2018 9:09 am

Houdini

avatar
Membro elite

Olá, consegui resolver o problema. Mas deixo aqui a solução para aqueles que desejarem adicionar tal efeito em seu fórum.
[Você precisa estar registrado e conectado para ver este link.]

Ps: Pode fechar o tópico.

Código:

jQuery(function($){
   
  $("*[rel=tooltip]").hover(function(e){
        var content = $(this).data('content');
        $("body").append('<div class="tooltip">'+content+'</div>');
         
        $('.tooltip').css({
                    top : e.pageY - 50,
                    left : e.pageX + 20
                    }).fadeIn();
     
  }, function(){
      $('.tooltip').remove();
  }).mousemove(function(e){
      $('.tooltip').css({
                    top : e.pageY - 50,
                    left : e.pageX + 20
                    })
  })
   
});

Ver perfil do usuário

3 Re: Efeito Toolip em Qui Jun 28, 2018 9:58 am

Pedxz

avatar
Admin

[Você precisa estar registrado e conectado para ver este link.] escreveu:[quadrado="Descrição"]Tenho um código de efeito toolip bem simples e funcional, porém quando troquei para a versão ModernBB da forumeiros, o mesmo não vêm funcionando bem. O código funciona da seguinte maneira.
Temos o li e dentro desse li tem uma img, ao passar o mouse por essa img o conteúdo dentro do data-content é mostrado em uma caixa flutuante. Mas não está funcionando e já tentei ajustar, porém não visualizo nada que possa fazer...

Código:

    <ul><li class="torso equippedItem" id="equipped_camisa"><img data-content="<span>Slot Torso</span><h2>Camisa Branca</h2><hr>" rel="tooltip" id="tip-w" src="https://kaizoku.zlx.com.br/_img/_it/it2/249.png"></li></ul>
Código:

jQuery(function(o) {
    o("*[rel=tooltip]").hover(function(t) {
        var e = o(this).data("content");
        o("body").append('<div class="tooltip">' + e + "</div>"), o(".tooltip").css({
                top: t.pageY - 10,
                left: t.pageX + 40
            }).fadeIn()
    }, function() {
        o(".tooltip").remove()
    }).mousemove(function(t) {
        o(".tooltip").css({
                top: t.pageY - 30,
                left: t.pageX + 10
            })
    })
});
[/quadrado]
[quadrado="Informações"]Fórum: [Você precisa estar registrado e conectado para ver este link.]
Versão: MODERNBB[/quadrado]

O Problema era o o, que devia ser $ né?

Ver perfil do usuário

4 Re: Efeito Toolip em Qui Jun 28, 2018 11:17 am

Houdini

avatar
Membro elite

O Problema era o o, que devia ser $ né?

Ainda assim após as minhas alterações o código não funcionava. Funcionou apenas quando o coloquei no template, ai sim resultou no esperado.
Deve ser algum erro da versão ou conflito com outro código js presente.
Mas agora está de boa, embora ambos os códigos sejam quase idênticos..

Ver perfil do usuário

5 Re: Efeito Toolip em Qui Jun 28, 2018 12:49 pm

Pedxz

avatar
Admin

Questão Resolvida
Tópico movido e arquivado, o autor está satisfeito/e ou a questão foi resolvida.
Tópico arquivado em: Arquivo JavaScript & jQuery

Ver perfil do usuário

Conteúdo patrocinado


Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum