This is a migrated thread and some comments may be shown as answers.

How do I prevent the click event (when using showOn: 'click') from bubbling up?

6 Answers 686 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Fred
Top achievements
Rank 1
Fred asked on 16 May 2013, 11:22 AM
By customer request I'm using a tooltip that only appears when explicitly clicked, and does not autohide.

The initialisation looks like:
$("#MyIdentifier").kendoTooltip({
    position: "right",
    autoHide: false,
    showOn: 'click',
    content: $('#calc1'),
    show: model.openCalculator,
    width: "224px"
});
This works like a charm, tooltips open when clicked and hide when explicitly closed (by a close button or clicking anywhere outside the tooltip).

The problem I'm encountering is that the tooltip element is within a division that has a handler for the click event too. And whenever the tooltip opens, the click handler for the surrounding div is being called too. This is undesired behaviour and I would like to know if anyone figured out a way to prevent this from happening?

You can see this behaviour in this simplified example:

http://jsfiddle.net/RedF/pgBNb/

All suggestions are appreciated!
Cheers,
 Fred

6 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 17 May 2013, 11:18 AM
Hello Fred,

In order to implement such behavior, you should hook a click event handler to the same element to which the tooltip is attached and to call stopProparation() method of the event argument. I have updated the jsFiddle in order to illustrate this.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Fred
Top achievements
Rank 1
answered on 17 May 2013, 12:28 PM
Thanks Rosen,  that indeed works fine.

I discovered that in my Real World project I'm using the 'filter' configuration, and this seems to break this solution. See http://jsfiddle.net/RedF/BpA8K/.

Is there a collection of objects returned when using the 'filter'? If so, I'll try to use .each() looping to add the click handler to all the returned objects.
Cheers,
Fred
0
Rosen
Telerik team
answered on 17 May 2013, 02:59 PM
Hello Fred,

Are you adding the tooltip elements on a fly or they are statically declared on the page? If later is true, then you can hook the click handler selector directly to those elements:

$("#container").kendoTooltip({
    autoHide: false,
    filter: ".Tooltip",
    showOn: "click"
});
 
$("#container .Tooltip").on("click", function(e) {
    e.stopPropagation();
});
 
$("#tooltips").click(function () {
     alert("I'm clicked too!");  
});


Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Fred
Top achievements
Rank 1
answered on 17 May 2013, 03:46 PM
I'm working with a combination of Kendo UI and Knockout.

Although I do configure the tooltips on the page in the document ready event, I'm afraid knockout does some additional stuff for some bindings. Your last solution with the event handler containing the stopPropagation is being called by those tooltips that are not within a <div data-bind="visible:...."> or <div data-bind="css:...."> division.

But I'm afraid the 'visible' and 'css' bindings from knockout are messing with the elements in such a way that this solution does not work for tooltips within these divisions.

Other knockout bindings like <div data-bind="with:..."> etc. are not inhibiting the event handler.

Interestingly something or some sequence of actions is preventing it from working on jsfiddle also :(, see http://jsfiddle.net/RedF/wEP3M/

Regards,
Fred
0
Rosen
Telerik team
answered on 18 May 2013, 06:07 AM
Hi Fred,

Here is a modified example which use the suggested approach as well as knockout.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Fred
Top achievements
Rank 1
answered on 21 May 2013, 10:50 AM
Rosen, thanks for your example.

Your code was working from most of my tooltips, the final problem was when using a knockout 'with' binding. Most tooltips inside 'with' bindings were working fine, but one specific 'with' binding never entered the registered click handler.

This problem is caused by using a 'with' binding like:
<div data-bind="with: aResult">
    <div id="tooltips" data-bind="css: { foo: applyFoo() }, visible: visible">
        Click here should show the alert
        <div class="Tooltip" title="(tooltip) Over NHG" ><p>Click here</p></div>
    </div>
</div>
and later re-assigning the 'aResult' object (in my case with the result from an ajax call):
self.aResult(ko.mapping.fromJS(result));
causes the click handler to be removed from my tooltip. Probably the logic behind 'with' gets very busy re-wiring DOM elements etc.

I found two ways to work around this. The first is to straightforward assign the results one by one to the individual observables from the 'aResult' object:
var rc = ko.mapping.fromJS(result);
self.aResult().aProperty(rc.aProperty());
self.aResult().anotherProperty(rc.anotherProperty());
...
The second way is to use knowledge about how knockout observables are constructed and use a for loop:
var source = ko.mapping.fromJS(result);
var target = self.aResult();
var prop, srcVal, tgtProp, srcProp,
        isObservable = false;
for (prop in source) {
    if (!source.hasOwnProperty(prop)) {
        continue;
    }
 
    if (ko.isWriteableObservable(source[prop])) {
        isObservable = true;
        srcVal = source[prop]();
    } else if (typeof (source[prop]) !== 'function') {
        srcVal = source[prop];
    }
     
    if (ko.isWriteableObservable(target[prop])) {
        target[prop](srcVal);
    } else if (target[prop] === null || target[prop] === undefined) {
 
        target[prop] = isObservable ? ko.observable(srcVal) : srcVal;
 
    } else if (typeof (self.Resultaat[prop]) !== 'function') {
        target[prop] = srcVal;
    }
 
    isObservable = false;
}
Once again, thank you for your patience and support. My tooltips are working as intended :).

Cheers,
Fred


Tags
ToolTip
Asked by
Fred
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Fred
Top achievements
Rank 1
Share this question
or