How to put an image inside the bootstrap popover

Question

How to put an image inside the bootstrap popover

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (0 votes)

3

I want to put an image inside the popover. 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><scriptsrc="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>

html css twitter-bootstrap bootstrap-3

asked by anonymous 13.07.2018 / 21:57

3 answers

2

You can use the native event of the function and change the contents of the popover. But there are a few different ways to do this, depending on your intent.

Firstly, because it is an image that uses the <img> tag, it is necessary to add the data-html="true" attribute in the link, so that the content of the popover is interpreted as HTML rather than pure text:

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

Also add another data-img attribute with path to image:

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

When the show.bs.popover event (event that is triggered when displaying the popover at the click of the link) is called, you change the data-content attribute (that is popover content) dynamically by adding the <img> tag % and drawing 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><scriptsrc="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 data-content attribute, but for a better visualization of the code, it is much better to use the show.bs.popover event, since you can even create a template and insert it into the popover:

$(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><scriptsrc="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 data-content attribute of the <a> link.

13.07.2018 / 22:32

0

It is not a very elegant solution, but sometimes it can help you. You can put a background-imagem in the popover, and use linear-gradiente to cover only the background of the text for the image to be appearing in the background of where the text should be.

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

I've made two variations that can serve you using backgroudn-position and back-ground-size . See the code to better understand how it went.

<!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><scriptsrc="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>

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

As I said this is only an option if there is something more appropriate ...

13.07.2018 / 22:31

Find value inside an array gif creation in r

score 4 · Accepted Answer

Hello, you just need to pass an object in the .popover () method

I removed the title and the data-content of 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><scriptsrc="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>