How to add html inside a tag - Popover

Asked

Viewed 849 times

0

I need to put tags inside the data-content of popover, How should I use quotation marks? example:

       <a href="#" data-toggle="popover" data-html="true" data-content="
       <div>             
           <span onclick=alteraLabel(teste)>Iphone</span>
       </div>
       ">CLIQUE</a>

in data-content can’t add my String as a parameter, because of the quotation marks

thank you

html html5

1 answer

2


You almost got there, the following example should help you:

$(function(){
    $("[data-toggle=popover]").popover();
    $("#ex02").popover({
        html : true, 
        content: function() {
          return $('#ex02conteudo').html();
        },
        title: function() {
          return $('#ex02titulo').html();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12" style="margin-top: 50px;">
          <a href="#"
            class="btn btn-info"
            data-toggle="popover" 
            data-html="true" 
            data-content="<div><b>Exemplo 01</b><br/>Criado utilizando atributos data-algumaCoisa</div>"
            title="<b>Título exemplo 01</b>">Exemplo 01</a>          
          <br /><br />
          <a href="#" id="ex02" class="btn btn-info">Exemplo 02</a>
          <div id="ex02conteudo" style="display: none">
             <div><b>Exemplo 02</b><br/>Criado utilizando javascript</div>
          </div>  
          <div id="ex02titulo" style="display: none">
             <b>Título exemplo 02</b> 
          </div>              
        </div>
      </div>
    </div>

Any doubt just comment.

  • worked out, thanks

Browser other questions tagged html html5

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