我正在设置一个解剖学比较页面,其中我有两个并排的两种动物(例如泥狗和鲨鱼(的插图,每个动物上都覆盖了一个svg,以便单击肌肉会触发带有肌肉名称的工具提示。
但是,我希望能够单击泥狗上的"下颌间"肌肉,并同时弹出泥狗和鲨鱼的"下颌间"工具提示。
我将如何使用Tooltipster实现这一点?我正在考虑使用functionReady函数,但由于我是编程新手,我不确定如何使用它。
这是我现在的代码片段(请注意,实际文件中有更多的 svg,我只是将它们取出,以便代码更易于阅读(:
$(document).ready(function() {
$('.tooltip').tooltipster({
theme: ['tooltipster-shadow', 'tooltipster-shadow-customized'],
trigger: 'click'
});
});
<!-- Left column -->
<div class='diagram' style="width:calc(50% - 49px); float:left; height: 85%; background-image: url(Images/mudpuppy_sideview.png); background-repeat: no-repeat; background-size:contain;" id="leftCol">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">
<style type="text/css">
.tooltip{opacity:0;fill:#FFFFFF;}
</style>
<path id="mud_intermandibularis" class="tooltip" title="Intermandibularis" d=" M185.78,232.53c-3.77-6.28-32.12,3.11-42.47,5.87c-10.36,2.76-39.02,8.98-41.44,14.5
c-1.78,4.07,43.88,31.14,67.86,31.42c8.58,0.1,11.4-8.12,12.78-17.61C183.19,261.95,190.96,241.16,185.78,232.53z"/>
</svg>
</div>
<!-- Right column -->
<div class="diagram" style="width:calc(50% - 49px); float:right; height: 85%; background-image: url(Images/shark_sideview.png); background-repeat: no-repeat; background-size:contain;">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">
<style type="text/css">
.tooltip{opacity:0;fill:#FFFFFF;}
</style>
<path id="shark_intermandibularis" class="tooltip" title="Intermandibularis" d="M248.8,325.07c0,0-4.14,4.92-10.36,5.96c-6.22,1.04-18.39,0-18.39,0
s8.55,13.47,22.01,15.28c13.47,1.81,49.73-2.59,50.24-6.47S251.39,325.33,248.8,325.07z"/>
</svg>
</div>
任何帮助将不胜感激!谢谢!
是的,使用functionReady
.在元素上放置一个属性,例如data-muscle="intermandibularis"
然后
functionReady (instance, helper) {
const muscle = $(instance.origin).data('muscle')
$.tooltipster.instances()
.forEach(inst => {
if (inst !== instance && $(inst.origin).data('muscle') === muscle) {
inst.open()
}
})
}