如何在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>