如何在Menucool JS插件的幫助下創建SVG工具提示？

Question

我有一個SVG「地圖」，我想在鼠標懸停在矩形上時實現一個簡單的工具提示。我想使用this plugin。

這是我如何鏈接SVG到HTML：

<object data="map.svg" type="image/svg+xml" id="map" width="1840" height="940"></object> 

第一次嘗試是這樣的：

 var svgobject = document.getElementById('map'); 
     if ('contentDocument' in svgobject) {   
      var svgdom = $(svgobject.contentDocument); 
      $("#rect4578").tooltip.pop(this, '#ToltipContent'); 
     } 

而且提示容器如下：

<div style="display:none;"> 
    <div id="ToltipContent"> 
     <h2>Header</h2> 
     <img src="img/img.jpg" style="float:right;" /> 
      Some text 
    </div> 
</div> 

我還在插件網站上解釋了將toolpip類添加到rect4578。但它沒有奏效。

然後我嘗試在SVG矩形的onmouseover屬性內添加插件調用。

onmouseover="tooltip.pop('#rect4578', '#ToltipContent')" 

同時，我什麼也沒得到。

但是，如果我通過使用上述任何一種方法改變矩形的不透明度，它就可以工作。

而問題是什麼是正確的方式來使用這個插件來實現工具提示的SVG？

謝謝。

Answer 1

因爲我沒有訪問你的對象，所以我使用了w3schools中的svg，它似乎工作正常。下面是我做得到它的工作：

.hide {display:none;} 
 
#object {width: 100px; overflow: hidden; margin: 0 auto;} 
 
#object svg {padding: 20px;} 
 
div#mcTooltip h2 { 
 
    margin-top: 10px; 
 
    line-height: 1; 
 
} 
 
#mcTooltip ul, #mcTooltip ol { 
 
    padding-left: 20px; 
 
} 
 
div#mcTooltip { 
 
    line-height: 16px; 
 
    border-width: 1px; 
 
    color: #333; 
 
    border-color: #bbb; 
 
    padding: 20px; 
 
    font-size: 12px; 
 
    font-family: Verdana, Arial; 
 
    border-radius: 6px; 
 
    box-shadow: 0 1px 4px #aaa; 
 
} 
 
div#mcTooltip, div.mcTooltipInner { 
 
    background-color: #eee; 
 
} 
 
div#mcTooltip a { 
 
    color: #069; 
 
} 
 
div#mcTooltip a:hover { 
 
    color: #333; 
 
} 
 
div#mcTooltipWrapper { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    overflow: visible; 
 
    z-index: 9999999999; 
 
    top: 0; 
 
} 
 
div#mcTooltip { 
 
    float: left; 
 
    border-style: solid; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
div.mcTooltipInner { 
 
    float: left; 
 
    position: relative; 
 
    width: auto; 
 
    height: auto; 
 
} 
 
div#mcTooltip, div#mcTooltip div { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
} 
 
div#mcttCo { 
 
    position: absolute; 
 
    text-align: left; 
 
} 
 
div#mcttCo em, div#mcttCo b { 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="http://www.menucool.com/Content/widgets?v=pWIjgyLaRd3JgPu8kRMWTBEFhPIETaPsvP81TXLgnbE1"></script> 
 
<div class="hide"> 
 
    <div id="toolTipContent">Tooltip text goes here</div> 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<object id="object" type="image/svg+xml" data="http://www.schepers.cc/svg/blendups/smiley.svg"><svg width="100" height="100"> 
 
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" /> 
 
</svg><svg width="100" height="100"> 
 
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" /> 
 
</svg><svg width="100" height="100"> 
 
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" /> 
 
</svg></object>

Answer 2

它看起來像你原來的方法的問題是對象標記不支持「的onmouseover」 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object。我正在使用img標籤。這是第一個答案的一個非常小的變化。

var svg = document.getElementById('kiwi'); 
 
svg.onmouseover = function() {tooltip.pop(this, '#tooltip');}

.hide {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="http://www.menucool.com/Content/widgets?v=pWIjgyLaRd3JgPu8kRMWTBEFhPIETaPsvP81TXLgnbE1"></script> 
 
<div class=""> 
 
    <img id="kiwi" height="200" width="200" src="http://s.cdpn.io/3/kiwi.svg"> 
 
</div> 
 
<div class="hide"> 
 
<span id="tooltip" > 
 
    This is a tooltip. 
 
</span> 
 
</div>