Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Can you stack Tipped instances easily

I have some menus that pop up using tipped. Some menu items then display additonal Tipped instances. While the instances display correctly, the issue here is that the console is filled with errors:

Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function

Are there some properties I need to set to be able to show chains of Tipped instances like the above?

Comments

  • Without an example I can only guess what would be causing those errors.

    I recommend using detach: false so tooltips never detach themselves from the DOM, if you stack things it should help avoid cases where the element that opened the tooltip detaches.
  • Hi Nick, I just wanted to follow up on this. While the errors I brought up previously were squashed by using detach:false as you suggested, stacking tipped instances is still an issue for us. Here's a use case and some example markup also.

    <a href="#" data-tipped-options="inline:'parentTipped',hideAfter:1000,hideOn:false,isStackParent:true,detach:false">Show the parent</a>
    
    <div id="parentTipped">
        <h4>I'm the parent</h4>
        <p>Some lipsum text here...</p>
        <a href="#" data-tipped-options="stacked:true,hideOthers:false,hideAfter:300,hideOn:false,detach:false">Link to show child</a>
    </div>
    

    So in this case what I would like to happen is that the first link shows the parent tipped and the link within that tipped would simply display another Tipped instance on top of that. This is extremely over-simplified by the way - the actual use case is much more intricate and warrants the use of stacked instances.

    The issue with the above configuration is that when you mouse out of the parent and into the child instance, the parent closes and it leaves the child floating. From looking at the source code, it would seem that checking the next element after a mouseleave would allow you to stop calling setIdle for example to keep the parent open, but I wanted to see if you had a better solution before experimenting with the source too much. Any thoughts on this?

  • edited March 2016

    You could experiment with the container option, just thinking about it if the nested tooltip is appended to its parent and not the body mouseleave shouldn't trigger as often. Not even sure if that works since I didn't build Tipped with nesting in mind. I think this approach and yours could work but have some limitations if a nested tooltip has enough offset to create a gap between tooltips, there's probably a lot to think about if you want to implement it properly.

  • Hey Nick, just to close this one out. I found a hacky solution to this which I don't particularly like, but one that definitely does the trick.

    When creating instances I pass in an option called isTippedParent and then in the createPreBuildObservers function, I've added the following:

    this.bind(this._tooltip, "mouseleave", function(a) {
                    shouldSetIdle = true
                    if (this.options.isTippedParent){
                        relatedEl = Tooltips.findElement(a.toElement)
                        if (relatedEl && relatedEl.dataset.tippedParent && relatedEl.dataset.tippedParent == this.element.id){
                            shouldSetIdle = false;
                        }
                    }
                    if (shouldSetIdle)
                        this.setIdle(a)
                })
    

    What this does is check if the next element is a Tipped instance also and if so, checks if it has tippedParent set in its dataset, which is simply the id of the parent Tipped instance's target element. Again, not ideal but it does what we need it to do at the moment. Just wondering if you can think of a cleaner method given the above code that would maybe be more performant?

Sign In or Register to comment.