Question

我有一个svg文件和多个路径，我想在svg文件中的路径标记上悬停后需要bootstrap popover，但我不知道如何在svg路径标记上使用bootstrap popover。

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

如何在svg路径标记上显示bootstrap popover

1 个答案: