Как создать всплывающую подсказку SVG с помощью плагина Menucool JS?

Question

У меня есть SVG-карта, и я хочу реализовать простую подсказку, когда мышь висит над прямоугольником.

Для всплывающей подсказки я хочу использовать this plugin.

Вот как я связываю SVG в HTML:

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

Первый Try было так:

 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> 

I также добавил класс toolpip к rect4578, как это объясняется на сайте плагина. Однако это не сработало.

Затем я попытался добавить вызов плагина внутри атрибута onmouseover прямоугольника SVG.

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

А также я ничего не получил.

Однако, если я изменяю непрозрачность прямоугольника, используя любой из описанных выше методов, он работает.

И вопрос в том, как правильно использовать этот плагин для реализации всплывающей подсказки для SVG?

спасибо.

Answer 1

Поскольку у меня не было доступа к вашему объекту, я использовал svg из w3schools и, похоже, работал нормально. Вот что я сделал, чтобы заставить его работать:

.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>