Is there any way to embed an SVG in a Bootstrap 3 popover? I can get the HTML to work in a popover like this:

var myText = 'here is some text'

$('#my-element').popover({
  container: 'body',
  content: myText,
  placement: 'right',
  html: true
})

What I would really like to do is to programmatically create the SVG inside a function like this:

$('#my-element').popover({
  container: 'body',
  content: function() {
    // add a new div, #my-popover-div,   
    // then build an svg here by appending
    // onto the newly created #my-popover-div
  }
  placement: 'right',
  html: true
})

Is it possible to create a SVG inside a popover?

Is there any way to embed an SVG in a Bootstrap 3 popover? I can get the HTML to work in a popover like this:

var myText = 'here is some text'

$('#my-element').popover({
  container: 'body',
  content: myText,
  placement: 'right',
  html: true
})

What I would really like to do is to programmatically create the SVG inside a function like this:

$('#my-element').popover({
  container: 'body',
  content: function() {
    // add a new div, #my-popover-div,   
    // then build an svg here by appending
    // onto the newly created #my-popover-div
  }
  placement: 'right',
  html: true
})

Is it possible to create a SVG inside a popover?

• javascript
• jquery
• twitter-bootstrap
• svg

3 Answers 3

You can define the content property as a function that returns a string, DOM node, or jQuery collection. When the function is called, the return value will be appended to the popover element.

From the Boostrap Popover options documentation:

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

Inside that function, you can construct an SVG however you like. In the following example, I construct the SVG from a string. You could alternately return an SVG string for a static SVG, but the advantage of returning a DOM node or jQuery collection is you can dynamically create the SVG content more-easily.

Working Example (Bootply):

$('#my-element').popover({
  container: 'body',
  content: function() {
    //Create our wrapper div (optional).
    var $el = $('<div id="#my-popover-div"></div>');
    //Create the SVG child (can be created more-dynamically).
    $el.append('<svg xmlns="http://www.w3/2000/svg" width="467" height="462" viewBox="0 0 467 462" style="display: block; width: 100%; height: 100%;">' + 
        '<rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />' + 
        '<rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" />' + 
      '</svg>');
    //Return the jQuery collection.
    return $el;
  },
  placement: 'right',
  html: true
});

#my-element {
  margin: 150px;
  padding: 15px;
  border: solid 1px grey;
  display: block;
}

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

<button id="my-element">Click Me!</button>

Screenshot:

You need to use the html property. In my example below, I'm using a button with a circle svg inside the popover.

Here's the jsfiddle

HTML

<button type="button" class="btn btn-primary" >Popover</button>

JS

$('button').each(function () {
    $(this).popover({
        html: true,
        placement: "bottom",
        content: function() {
            //you can create the div before and then append the svg. I'm doing all at once.
var content = '<div id="#my-popover-div"><svg width="50" height="50"><circle r="20" cx="25" cy="25" style="fill: blue"/></svg></div>';
            return content;
        }

    });
});

First Example Your HTML

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover">Dismissible popover</a>

Your Javascript

var text = 'And here\'s some amazing content. It\'s very engaging. Right? An SVG image is added to my popover!';
var svg = '<svg height="150" width="400"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>Sorry, your browser does not support inline SVG.</svg>';
$('a').popover({
    container: 'body',
    content: function () {
       return text+svg;
    },
    placement: 'right',
    html: true
});

FIDDLE http://jsfiddle/fuj4xxx0/

Second example

HTML

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover">Dismissible popover</a>

Javascript

var text = 'And here\'s some amazing content. It\'s very engaging. Right? An SVG image is added to my popover!';
var svg = '<svg height="150" width="400"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>Sorry, your browser does not support inline SVG.</svg>';
$('a').popover({
    container: 'body',
    content: function () {
        var mysvgdiv=$('<div id="svg_id" style="border:1px solid red;padding:5px"></div>');
       return mysvgdiv.prepend(text).append(svg);
    },
    placement: 'right',
    html: true
});

FIDDLE http://jsfiddle/fuj4xxx0/3/