Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltipped children of tooltipped parents #828

Open
e-motiv opened this issue Mar 6, 2024 · 1 comment
Open

Tooltipped children of tooltipped parents #828

e-motiv opened this issue Mar 6, 2024 · 1 comment

Comments

@e-motiv
Copy link

e-motiv commented Mar 6, 2024

First of all, thanks for a good tooltip library.

I have elements with tooltips that are the children of elements with also tooltips. When you hover the child, both tooltips are shown. I have read issue #638 and #627, but it didn't solve everything. But I almost solved it myself. My code below works except when you leave the child at an edge that is the same edge of the parent. In that case the parent opens when not needed. (Or when you leave out the reopen code, the parent tooltip does not show when hovering back to it.)

Questions:

  1. Is my code the best approach ?
  2. How to solve the "common edge" problem?
$('.tooltip')
		.tooltipster({
			debug:true,
			animation: 'grow',
			interactive:true,
			repositionOnScroll:true,
			//trackOrigin:true,		//performance!
			delay: 200,
			delayTouch:200,
			contentAsHTML : true
		})
		//All elements with tooltip that have a parent with a tooltip
		.children('.tooltip')
			.tooltipster('option' , 'functionBefore' ,  (inst, helper) => {
				$(helper.origin).parents('.tooltip').tooltipster('disable');  
			})
			.tooltipster('option' , 'functionAfter' ,  (inst, helper) => {
				$(helper.origin).parents('.tooltip').tooltipster('enable').tooltipster('open');  
			})
		; 
@e-motiv
Copy link
Author

e-motiv commented Mar 8, 2024

Solved it.
Still wondering if this is the best approach and if there is no tooltipster method or option that would even make it better. So I'll leave it open until the developer has seen this.

$('.tooltip')
		.tooltipster({
			debug:true,
			animation: 'grow',
			interactive:true,
			repositionOnScroll:true,
			//trackOrigin:true,		//performance!
			delay: 200,
			delayTouch:200,
			contentAsHTML : true
		})
	/***** Don't open tooltips of parents  ****/
	//click (parent events comes after child)
	.has('.tooltip')
		.tooltipster('option' , 'functionBefore' ,  (inst, helper) => {		console.log('functionBefore', helper)
			if (helper.event && !helper.event.target?.isEqualNode(helper.origin))
				return false;//console.log(helper.event)//.stop()
		})
	//hover (child events comes after parent)
	.children('.tooltip')
		.tooltipster('option' , 'functionBefore' ,  (inst, helper) => {		console.log('functionBefore', helper)
			$(helper.origin).parents('.tooltip').tooltipster('close')
		})
		.tooltipster('option' , 'functionAfter' ,  (inst, helper) => {		console.log('functionAfter', helper)
			//If hover out on or via parent 
			if (helper.event.relatedTarget?.classList.contains('tooltip'))
				$(helper.event.relatedTarget).tooltipster('open')
		})
	/**************/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant