引導酥料餅

據w3schools.com，爲了使未來一酥料餅出現一個鏈接，我需要用的就是這個HTML：引導酥料餅

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

我的問題是這樣的：我怎麼會做出酥料餅當我點擊一個svg元素時出現？我嘗試這樣做：

<svg width="100" height="100"> 
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"> 
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    </a> 
</svg>

基本上，我所做的就是堅守在鏈路中的SVG形狀，但它不工作。
當我點擊svg時，如何顯示彈出窗口？

任何幫助將不勝感激。

來源

2016-11-21 CyberBurst

我想出的解決方案內。在製作彈出窗口時，引導程序會在父容器內生成一個div元素。很明顯，當它在svg裏面的時候，這是行不通的。所以這裏是解決方案，給它一個data-container設置爲body你也可以擺脫一個元素，並直接將其添加到圓形元素。

<svg width="100" height="100"> 
    <a data-toggle="popover" data-container="body" title="Popover Header" data-content="Some content inside the popover" data-placement="right"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    </a> 
</svg> 


<script> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
}); 
</script>

來源

2016-11-21 19:23:11

問題是我想有多個不同的svg形狀有不同的彈出。我需要將所有的形狀都放在一個svg元素中。 – CyberBurst

CyberBurst我已經更新了我的答案，現在它可以工作。它可以讓你爲每個形狀設置它自己的彈出:) –

它爲我工作！謝謝！ – CyberBurst

將數據切換=「彈出窗口」title =「彈出窗口標題」data-content =「彈出窗口中的一些內容」到SVG.It將起作用。

來源

2016-11-21 19:17:25 user3407386

雖然這確實有效，但我真的希望將data-toggle =「popover」等放在我的圈子元素上。當我將它添加到圈子中時，它仍然不起作用。 – CyberBurst

試試這個。當你調用popover時，將容器作爲body。 – user3407386

$（'[data-toggle =「popover」]'）。popover（{container：'body'}）; – user3407386

儘量把這個腳本標籤

$("circle").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});

來源

2016-11-21 19:20:07

由於某種原因，這不適用於我 – CyberBurst

回答

相關問題