Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

oscar009

Pegar conteúdo de uma DIV e colocar na Tooltip

Recommended Posts

Olá Pessoal ,

 

Eu estou fazendo um template e estou com o seguinte problema, estou usando o tooltip jquery tipso e consegui pegar o texto dentro

de uma DIV e jogar ela na tooltip. Porém o que acontece que ela pega o texto da primeira e joga em todas.

Como eu poderia pegar o texto de cada DIV e deixa-la na tooltip correta.

 

Abaixo eu estou colocando as imagens para explicar melhor o que preciso, assim também um link com o exemplo funcionando.

Por favor, se alguém puder me dar essa força ficarei muito agradecido.

 

 

tooltip1.png

Na Imagem acima o Primeiro botão está funcionando perfeitamente.

Mas no segundo botão eu quero que apareça o texto do segundo botão.

 

tooltip2.png

Eu sei que deve existir alguma maneira para o texto do botão 2 aparecer no botão 2.

 

Abaixo as imagens do código.

codigo1.png

 

 

Imagem do Arquivo tooltip.js

codigo2.png

 

Abaixo o link do exemplo funcionando, porém com esse erro que não consigo resolver.

 

Link TOOLTIP

 

Talvez eu não tenha explicado o que eu preciso, mas olhando as imagens do código e o exemplo

dá para entender melhor.

 

Desde já Agradeço a todos que puderem me ajudar.

Oscar Aguiar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nunca usei este plugin (uso o framework materialize do google), mas pelo seu codigo da pra ver que voce esta usando a mesma classe (do botao), e o mesmo id (do conteudo) por isso so esta mostrando o mesmo texto para os dois botoes

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entao faça o seguinte:

 

Crie um id para cada botao

por exemplo:

<div id ="botao1"> e <div id ="botao2">

 

e um id diferente para cada conteudo

por exemplo:

<div id ="conteudo1"> e <div id ="conteudo2">

 

depois na funcao faça:

 

var box1 = $("conteudo1").text();

var box2 = $("conteudo2").text();

 

$("botao1").tipso({

// Tudo igual aqui

content: box1

});

 

e

 

$("botao2").tipso({

// Tudo igual aqui

content: box2

});

 

Se não entendeu é só perguntar que eu tento explicar de melhor

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pelo suporte colega, porém esse esquema não irá funcionar para mim.

Eu estou fazendo esse template para exibir algum texto sobre o produto.

Então imagine que eu tenha uma prateleira com 1500 produtos, o código ficaria gigantesco.

 

Por isso eu tenho certeza que dá para fazer de alguma forma, ou um array ou uma função.

 

Mas agradeço pelo suporte.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entendi,

bem como nao tenho como testar esse plugin pensei em um jeito(pode nao ser dos melhores).

 

Nao sei com que linguagem voce esta trazendo os dados do banco mas a logica seria seguinte:

 

 

<% id = 1 %>

<% while not infobanco.eof %> -> isso é em e asp(utilize sua linguagem de programaçao)

 

<div id ="botao<%=id%>">BOTÃO</div>

<div id ="conteudo<%=id%>">CONTEUDO</div>

 

<script type="text/javascript">

$("botao2").tipso({

// Tudo igual aqui

content: $("#conteudo<%=id%>").text()

});

</script>

 

<% id = id + 1 %>

 

<% infobanco.movenext %>

<% wend %>

 

Faça o teste e tente usar essa logica com sua linguagem de programaçao.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.