0

I have one svg file and multiple path in that , I want bootstrap popover after hover on path tag in svg file but i dont know how to use bootstrap popover on svg path tag.

here is my code :-
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">//bootstrap css
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script> //jquery
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>//bootstrap js

<svg version="1.1" id="Home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 3363 3125" style="enable-background:new 0 0 3363 3125;" xml:space="preserve">
<g id="_302-319_Blocks">
    <path id="_319" class="st7 popoverData" d="M368.5,437.4l70-70l157.7,157.7l-0.5,20.5l26.9,26.9L553.1,622L368.5,437.4z"  rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover"/>

</g>
</svg>

 <script>
     $('.popoverData').popover();
 </script>
pratik
  • 11
  • 1
  • 4

1 Answers1

0

You have to add a container like this: 

$('.popoverdata').popover({
    title: "Title",
    content: "Content",
    container: 'body'
});
Erik Peschier
  • 1
  • 2