0

I'm creating several types of jQuery UI Tooltips. One type:

  • Open when you click an element (say a ? icon)
  • Should allow the user to click inside the tip so that text can be selected/copied or interacted with.
  • Should close when user clicks anywhere other than inside the tip.

I'm almost there, except for closing the tip. My project has a special clickoutisde event that can be bound to any element (see fiddle).

In the code below, it's bound to the element triggering the tooltip - in this case, the icon. So the tip closes if you click anywhere other than the icon.

My question is, can I somehow move this event from the icon to the tooltip itself (the .ui-icon class) so the tip closes if you click anywhere other than inside the tip?

Or do I need some other way? Thanks!

//
// EXAMPLE: Click to Open + Click Outside to Close
// Works on any element with the `.has-tip-pop` class + `title` attribute
// @requires ui-clickoutside.js
//

$( function() {

    $('.has-tip-pop')

        // Stop tip's default close.
        .bind("mouseleave", function (event) {
            event.stopImmediatePropagation();
        })

        // Initialize tip.
        .tooltip({
            // Start as `disabled` so we can `enable` with `click`.
            disabled: true,     
            // A `ui-bg-` style provided by this theme.
            tooltipClass: "ui-bg-black-black",
            // Tip above h-centered
            position: { my: "center bottom", at: "center top-10", },
        }) 

        // Open the tooltip.
        .on('click', function () {
            $(this).tooltip('enable').tooltip('open');
        }) 

        // Click outside ORIGINAL element to close.
        // How to bind this to `.ui-tooltip`?
        .bind( "clickoutside", function(){
            $(this).tooltip('disable'); 
        }) 

        // Handle bug #10689 Memory Leak
        .each(function(idx, element) {
            var ele = $(element);
            ele.tooltip({
                "close": function(evt, ui) {
                    ele.data("ui-tooltip").liveRegion.children(":not(:last)").remove();         
                } 
            });  
        });     

} ); // function

jsFiddle

CLARIFICATIONS

I'm new to JS - I'm still learning the abstractions and semantics. Please be as explicit as possible with feedback :)

This type of tooltip is for just-in-time help - user clicks a ? icon or similar element and sees either:

  • Text that they can select/copy - currently in element's title attribute.
  • Text + More Info link they can click - currently in tooltip.js content.

The memory leak is a known issue - it occurs on the default tooltip and my example includes the best working suggestion for dealing with it.

The clickoutside event is by Ben Alman - it's documented here and is visble in my fiddle.

SPECIFIC QUESTIONS

Is it conceptually wrong to use the Tooltip widget for the behaviors I describe above?

When I began this journey, I didn't think so - there are plenty of people and plugins doing similar things, I just couldn't find an example I could decipher or that got me all the way there. But if this isn't the best approach, what would you suggest instead?

I use the clickoutside event for closing dialogs and similar - I don't understand it, but it's easy to use and works. But is it the best way to approach closing tooltips when a user clicks anywhere but inside the tip itself?

If clickoutside is appropriate, and I understand it correctly, then it needs to be bound to the .ui-tooltip wrapper - the logic being, "if you click anywhere outside the tooltip, it will close".

It should look something like $('.ui-tooltip').bind(...), but for the current tooltip, and not all tooltips because we have another type that uses default mouse in/out behavior.

I can see in the code that handles the memory leak that you can get at the current tooltip's .ui-tooltip div, but don't know how to apply that here?

Improve this question
1
  • Tooltips are simple ui elements that are meant to display small amounts of data when you hover over an element. This is the expected pattern for a tooltip element, it's how they are meant to be with or without JQueryUI. Using them for additional functionality like clicking, and interacting with the contents of the tooltip is objectively wrong. Commented Nov 8, 2018 at 14:00

1 Answer 1

Reset to default
0

You could check the element that is being clicked to see if it is the tool tip.

.bind("clickoutside", function() {
  if(!$(event.target).hasClass('ui-tooltip-content')){
    $(this).tooltip('disable');
  }
})

This will however not work if your tool tip ends up having other elements in it, at that point you would also need to check if it's a child of the tool tip element.

Honestly, this is a pretty insane way to accomplish this, and a misuse of what a tool tip is for. The fact that your tooltip code includes a fix for a memory leak is NUTS.

You would probably be better off managing your own element for this.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for the quick reply - I'll give it a try and report back. FWW, it's not MY code that causes the memory leak ... I noticed it on the default tooltip and discovered it's a known issue.
Okay, this works as far as my limited tests tell, but I just don't think it's how to do it. Note clarifications in my OP. Thanks again for your reply.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.