CODEWITHSUNDEEP
javascripthtmltooltipster
Kuro
Kuro

Reputation: 3

Tooltipster - how to have tooltips with the same content pop up if one of those tooltips is clicked

I'm setting up an anatomy comparison page where I have two illustrations side by side of two animals (e.g. mudpuppy and shark), with an svg overlayed on each so that clicking on a muscle triggers a tooltip with the muscle's name on it.

However, I want to be able to click on the "intermandibularis" muscle on a mudpuppy and have the "intermandibularis" tooltip of both the mudpuppy and shark pop-up as well.

How would I achieve this with Tooltipster? I was thinking of using the functionReady function but because I'm new to programming I'm not sure how to use it.

Here's a snippet of my code for now (please note there are more svg's in the actual file, I just took them out so the code is easier to read):

	$(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>

Any help would be greatly appreciated! Thank you!

Upvotes: 0

Views: 166

Answers (1)

Louis Ameline
Louis Ameline

Reputation: 2889

Yes, use functionReady. Put an attribute on your element like data-muscle="intermandibularis" and then

functionReady (instance, helper) {
  const muscle = $(instance.origin).data('muscle')
  $.tooltipster.instances()
    .forEach(inst => {
      if (inst !== instance && $(inst.origin).data('muscle') === muscle) {
        inst.open()
      }
    })
}

Upvotes: 0

Related Questions