0

Preciso colocar um "balão" no evento click dos carros ou até mesmo usar o tooltip com mouse over Acho que a melhor forma é usar o popover do Bootstrap 3, mas não sei como usar esse elemento.

Alguma sugestão?

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

2
  • Teria como explicar melhor do que precisa? Você não sabe como usar o popover? Ou gostaria de algum exemplo?
    – Randrade
    Commented 6/04/2015 às 1:28
  • eu nunca usei esse componente, gostaria de um exemplo (: @Randrade
    – fronthendy
    Commented 6/04/2015 às 1:29

1 Resposta 1

3

Bom, se é o que precisa, segue um exemplo de como utilizar o componente Popover

var image = '<img src="https://i.sstatic.net/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>

Edição

Para colocar imagem, basta adicionar a tag img dentro de uma variável JS, e chamar esta variável como a,tributo do Popover. Como mostra o exemplo.

Qualquer dúvidas, neste link possui mais alguns exemplos.

6
  • Vou precisar colocar imagem e personalizar o popover.. como faço isso?
    – fronthendy
    Commented 6/04/2015 às 12:31
  • Estou tentando dessa forma e parece que ele fica numa posição absoluta em relação a pagina, gostaria que ele ficasse próximo ao elemento.
    – fronthendy
    Commented 6/04/2015 às 13:17
  • @HendyAlmeida editei a resposta, verifique se é isso que precisa. Caso tenha mais alguma dúvida, comente que modifico para você.
    – Randrade
    Commented 6/04/2015 às 13:33
  • Eu quis dizer imagem realmente dentro do popover. Como está na imagem..
    – fronthendy
    Commented 6/04/2015 às 13:49
  • Adicionei a imagem á pergunta, dá uma olhada pra vê como está ficando
    – fronthendy
    Commented 6/04/2015 às 13:58

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 .