Pass value of javascript variables inside Bootstrap Popover

Question

Pass value of javascript variables inside Bootstrap Popover

Asked 5 years, 2 months ago

Viewed 175 times

1

I have a Pover that shows information and would like to know how to pass values of variables contained in javascript to data-content within this Pover? Follows my code:

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 answers

0

Use the dataset to swap variable text.

// 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>

I got it, buddy. Thanks

– Carlos

2019/09/11 at 19:46
@Carlos nice slow that worked out there!

– hugocsl

2019/09/11 at 20:08

Browser other questions tagged javascript twitter-bootstrap popover

You are not signed in. Login or sign up in order to post.

by Gabriel Stimamiglio • 1 point · Answer 1 · 2019-09-11T16:51:35+00:00

You can inside the .popover() use the content options

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

the complete file would be like this:

    <!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>