Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Embed an SVG in a bootstrap 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?

like image 365
turtle Avatar asked Feb 06 '15 19:02

turtle


2 Answers

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.org/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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

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

Screenshot:

svg popover

like image 103
Alexander O'Mara Avatar answered Sep 25 '22 08:09

Alexander O'Mara


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;
        }

    });
});
like image 33
Ricardo Nuñez Avatar answered Sep 22 '22 08:09

Ricardo Nuñez