How to place an image inside the bootstrap Popover

Question

How to place an image inside the bootstrap Popover

Asked 5 years, 11 months ago

Viewed 752 times

3

I want to put an image inside Popover. Does anyone know if this is possible?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

</body>
</html>

Like this: https://bootsnipp.com/snippets/Ek2nl

– Edjane

2018/07/13 at 20:13

3 answers

5

Hello just need to pass an object in the method . pover()

I removed the title and the data-content from the tag

See the following example.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover">Toggle popover</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
    title:'Exemplo de imagem em popup', 
    html:true,
    content:'<img src="https://picsum.photos/200/300"></img>'});   
});
</script>

</body>
</html>

Thank you! That’s exactly what I wanted :)

– Thayna Rocha

2018/07/16 at 13:45

Browser other questions tagged html css twitter-bootstrap bootstrap-3

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

by Sam • **79,597** points · Answer 1 · 2018-07-13T20:32:45+00:00

You can use the function’s native event and change the contents of the Popover. But there are a few different ways to do this depending on your intention.

First, because it is an image that uses the tag <img>, it is necessary to add the attribute data-html="true" in the link, so that the content of the Popover is interpreted as HTML and not plain text:

<a href="#" data-html="true"...>

Also add another attribute data-img with the way to image:

<a href="#" data-html="true" data-img="url_da_imagem"...>

When the event show.bs.popover (event that is triggered when displaying the Popover at the link click) is called, you change the attribute data-content (which is the contents of Popover) dynamically, adding the tag <img> and pulling the path of the image in data-img.

In the example below the Popover already has the text. I will just insert an image after the text concatenating the existing text with the tag <img>:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();  
});

$('[data-toggle="popover"]').on('show.bs.popover', function(){

   // conteúdo original do popover
   var conteudo = $(this).data("content");
   
   // imagem a ser inserida
   var imagem = '<div><img width="50" src="'+ $(this).data('img') +'"><div>';

   // adiciona uma imagem concatenando com o que já tinha
   $(this).attr("data-content", conteudo+imagem);

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-html="true" data-img="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

You can also insert everything directly into the attribute data-content, but for a better view of the code, it is much better to use the event show.bs.popover, because you can even assemble a template and insert it in Portpover:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();  
});

$('[data-toggle="popover"]').on('show.bs.popover', function(e){

   // novo conteúdo para o popover
   var conteudo = 'Some content inside the popover<br>'
   +'<img width="50" src="'+ $(this).data('img') +'">';

   // adiciona o conteúdo da variável "conteudo"
   $(this).attr("data-content", conteudo);

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-html="true" data-img="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" data-toggle="popover" title="Popover Header">Toggle popover</a>
</div>

In this case above, you can even omit the attribute data-content of the link <a>.

by hugocsl • **65,517** points · Answer 2 · 2018-07-13T20:31:10+00:00

It’s not a very elegant solution, but sometimes it can help you. You can put a background-imagem on Pop, and use a linear-gradiente to cover only the text background for the image will appear at the bottom where the text should be.

In order to put an image in each Pover I used the attribute [data-content^="item1"] and he only applies the style in the Popover that starts the text with Item1, there you always put the first word of the sentence, as long as it does not repeat at the beginning of the sentence of another.

I made two variations that might suit you using backgroudn-position and back-ground-size. See the code to better understand how it turned out.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
  [data-content^="item1"] + .popover {
      background-image: linear-gradient(to bottom, transparent 0%, transparent 60%, #fff 60%, #fff 100%), url(https://placecage.com/100/100) !important;
      background-size: cover;
    background-repeat: no-repeat;
    background-position: center ;
    padding: 0 !important;
  } 
  [data-content^="item2"] + .popover {
      background-image: linear-gradient(to bottom, transparent 0%, transparent 60%, #fff 60%, #fff 100%), url(https://placecage.com/100/100) !important;
      background-size: 60px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 !important;
  } 
  [data-content^="item1"] + .popover .popover-content, [data-content^="item2"] + .popover .popover-content {
      padding-top: 50px;
  }
  </style>
</head>
<body>

<div class="container">
  <h3>Popover Customizado 1</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="item1 - Some content inside the popover lorem ipsum dolor 123">Toggle popover</a>
</div>
<div class="container">
  <h3>Popover Customizado 2</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="item2 - Some content inside the popover lorem ipsum dolor 123">Toggle popover</a>
</div>
<div class="container">
  <h3>Popover Original</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover lorem ipsum dolor 123">Toggle popover</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

</body>
</html>

OBS: You may need to tweak the linear-gradient values depending on the size of the Popover text, but as each Popover has to have its css due to different image for each vc you can tweak this for each case.

As I said, this is just an option if there’s nothing more appropriate...