How do you use Bootstrap Popover?

Navigation
0

I need to put a "balloon" in the click event of the cars or even use the tooltip with mouse over I think the best way is to use the Bootstrap 3 popover, but I do not know how to use this element.

Any suggestions?

    
asked by anonymous 06.04.2015 / 03:04

1 answer

3

Well, if that's what you need, here's an example of using the Popover component 

var image = '<img src="http://i.stack.imgur.com/92bh0.png"width="150px" height="150px">';
$(function () {
    $('#example').popover({placement: 'bottom', content: image, html: true});
});
.relative2 {
  position: relative;
  top: 20px;
  left: 50px;
  background-color: white;
  width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><p>Cliquenobotãoparaolharoexemplo.</p><divclass="relative2">
<a href="#" id="example" rel="popover"
      data-content=""
   data-original-title="Exemplo" class="btn btn-primary">Clique Aqui
</a>
 </div>

Editing

To put image, just add the img tag inside a JS variable, and call this variable as the, Popover tribute. As the example shows.

Any questions, here have some more examples.

    
06.04.2015 / 04:02
ListView in numerical order - Android Error in making an Insert in the bank