By customer request I'm using a tooltip that only appears when explicitly clicked, and does not autohide.
The initialisation looks like:
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
The initialisation looks like:
$("#MyIdentifier").kendoTooltip({
position: "right",
autoHide: false,
showOn: 'click',
content: $('#calc1'),
show: model.openCalculator,
width: "224px"
});
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
0
Hello Fred,
Rosen
the Telerik team
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.
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
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
Hello Fred,
Rosen
the Telerik team
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!"
);
});
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
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
Hi Fred,
Rosen
the Telerik team
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:
and later re-assigning the 'aResult' object (in my case with the result from an ajax call):
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:
The second way is to use knowledge about how knockout observables are constructed and use a for loop:
Once again, thank you for your patience and support. My tooltips are working as intended :).
Cheers,
Fred
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
>
self.aResult(ko.mapping.fromJS(result));
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());
...
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
;
}
Cheers,
Fred