如何在svg路徑標記上顯示bootstrap popover

Question

我有一個svg文件和多個路徑， 我希望在svg文件中的路徑標記上懸停後引導彈窗，但我不知道如何在svg路徑標記上使用引導彈窗。

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> 

Answer 1

您必須添加一個容器是這樣的：

$('.popoverdata').popover({ 
    title: "Title", 
    content: "Content", 
    container: 'body' 
});