1

Tenho um popover que mostra informações e gostaria de saber como faço pra passar valores de variáveis contidas em javascript para o data-content dentro desse popover? Segue meu código:

var id_teste = 'teste';

$(document).ready(function(){
$('[data-toggle="popover"]').popover({html: true});   
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>


<button type="button" class="btn btn-default" data-position="top-left" title="Sem Contato" data-toggle="popover" data-placement="top" data-content="VARIÁVEL JAVASCRIPT AQUI!!!!">Sem Contato</button>

2 Respostas 2

0

Use o dataset para trocar o texto da variável.

// inicia o popover
$(function () {
  $('[data-toggle="popover"]').popover()
})


// troca o texto do popover pelo da variável 
var txt = 'meu texto novo';

var btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
    btn.dataset.content = txt;
    console.log(btn.dataset.content);
})
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

2
  • Consegui amigo. Valeu
    – Carlos
    11/09/2019 às 19:46
  • @Carlos demoro legal que deu certo ai!
    – hugocsl
    11/09/2019 às 20:08
0

Você pode dentro da .popover() utilizar nas opções o content

    let teste = 'teste2'
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover({
            placement : 'bottom',
            content: teste,
            html: true
        });
    });

o arquivo completo seria assim:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>teste</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">        </script>
    <style>
        .bs-example{
            margin: 150px 50px;
        }
    </style>
    <script>
    let teste = 'teste2'
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover({
            placement : 'bottom',
            content: teste,
            html: true
        });
    });
    </script>
    </head>
    <body>
    <div class="bs-example">
        <div class="popover-demo mb-2">
            <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="">Popover</button>
        </div>
    </div>
    </body>
    </html>                            
1
  • Testei o seu código e também deu certo. Mto obrigado pela ajuda.
    – Carlos
    11/09/2019 às 19:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .