Tooltipster - 如果单击其中一个工具提示,如何弹出具有相同内容的工具提示

Posted

技术标签:

【中文标题】Tooltipster - 如果单击其中一个工具提示,如何弹出具有相同内容的工具提示【英文标题】:Tooltipster - how to have tooltips with the same content pop up if one of those tooltips is clicked 【发布时间】:2020-09-16 10:50:05 【问题描述】:

我正在设置一个解剖比较​​页面,其中我有两个并排的两个动物(例如泥小狗和鲨鱼)的插图,每个插图上都覆盖了一个 svg,以便单击肌肉会触发带有肌肉名称的工具提示它。

但是,我希望能够单击泥小狗上的“颌间肌”,并同时弹出泥小狗和鲨鱼的“颌间肌”工具提示。

如何使用 Tooltipster 实现这一目标?我正在考虑使用 functionReady 函数,但因为我是编程新手,所以我不知道如何使用它。

这是我现在的代码的 sn-p(请注意实际文件中有更多的 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">
			.tooltipopacity: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">
			.tooltipopacity: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>

任何帮助将不胜感激!谢谢!

【问题讨论】:

【参考方案1】:

是的,使用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()
      
    )

【讨论】:

你会把这个函数放在代码的什么地方?抱歉,我真的是 JS 新手。 这是您在初始化 Tooltipster 时传递给它的选项。该文档有示例。

以上是关于Tooltipster - 如果单击其中一个工具提示,如何弹出具有相同内容的工具提示的主要内容,如果未能解决你的问题,请参考以下文章

AJAX 成功后在 tooltipster 中更新 html 内容

通过单击 prev 或 next 打开 tooltipster,无需专门单击目标

Tooltipster 已初始化,但悬停或单击时不显示

关注其中一个选项时如何显示下拉字段的工具提示

tooltipster - 在多个工具提示上使用一个功能 - origin.helper 或一个或多个工具提示的问题已经存在

如何在一张图片上放置几个 Tooltipster 工具提示?