如何在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' 
});