How do you use Bootstrap Popover?

Asked

Viewed 2,863 times

0

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

Any suggestions?

Carro com toolkit no evento click inserir a descrição da imagem aqui

javascript css html5 twitter-bootstrap

  • Could you explain better than you need? Don’t you know how to use Popover? Or would you like some example?

  • I’ve never used this component, I’d like an example (: @Randrade

1 answer

3


Well, if that’s what you need, here’s an example of how to use the component Popover

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>
<!-- Latest compiled and minified CSS -->
<link rel="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>Clique no botão para olhar o exemplo.</p>

<div class="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 tag img within a JS variable, and call this variable as a, Popover. As the example shows.

Any doubts, at this link has a few more examples.

  • I will need to put image and customize Popover.. how do I do this?

  • I am trying this way and it seems that it is in an absolute position in relation to the page, I would like it to be close to the element.

  • @Hendyalmeida edited the answer, check if this is what you need. If you have any more questions, comment that I modify for you.

  • I meant image really inside the Popover. As it is in the image..

  • I added the image to the question, take a look at how it’s turning out

  • @Hendyalmeida I edited the answer again. See if this is what you need.

Show 1 more comment

Browser other questions tagged javascript css html5 twitter-bootstrap

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