calebjacob / tooltipster

A jQuery tooltip plugin
MIT License
2.76k stars 482 forks source link

Tooltipped children of tooltipped parents #828

Open e-motiv opened 6 months ago

e-motiv commented 6 months ago

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 commented 6 months ago

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')
        })
    /**************/