TooltipBehavior and Kendo ComboBox

[Richard Eckart de Castilho]

Hi,

I am trying to apply a TooltipBehavior to a Kendo ComboBox. That works nicely if I use no selector. However, if I try to limit the tooltip behavior to the selection list of the combobox, I run into problems. "field" is the combobox here...

field.add(new TooltipBehavior("#"+field.getMarkupId()+"_listbox *[title]", options));

So in principle that seems to generate the correct JS... but 

two header items are added

1) the one for the tooltip behavior

2) the one for initializing the kendo combobox - this is actually the code which dynamically creates the "XXX_listbox" element in the DOM

Hence, 1) is without effect.

Is there some sane way to force the TooltipBehavior header item to be added after its host component instead of before it?

Cheers,

-- Richard

[Sebastien]

Hi Richard,

What TooltipBehavior (jquery-ui or kendo-ui) and which version are you using?

Thanks,

Seb.

[Richard Eckart de Castilho]

Using com.googlecode.wicket.jquery.ui.widget.tooltip.TooltipBehavior.

Btw. I got my code working by adding the TooltipBehavior not to the Combobox
but rather to the same container to which I also add the box:

add(field)
add(TooltipBehavior...)

That results in the correct order of the JS headers.

But I wonder if that is a good solution or if there is a better one.

-- Richard

[Sebastien]

Hi again,

Right, this is a correct usage.

The reason why tooltip behavior is rendered before the ComboBox-Behavior, is because.... it is added before! :)

ComboBoxBehavior is the underlying behavior of the ComboBox, and it is added at #onInitialize time, ie after field.add(TooltipBehavior) which occurs before (I can not say "immediately" because I'm not 100% sure, the rules of behavior order depends on if it's on a page/component, a sub component, a sub behavior, etc).

A safe way to solve this is to override #onInitialize

final ComboBox<String> combobox = new ComboBox<String>("combobox", /*...*/) {

    protected void onInitialize()
    {
        super.onInitialize(); // ComboBoxBehavior will be added here

        this.add(new TooltipBehavior("#" + this.getMarkupId() + "_listbox *[title]", new Options()));
    };
};

I personally didn't succeed to get it work, I should missed something... and I have to go bed! :) But the order is correct for sure...

Hope this help, best regards,

Sebastien

[Richard Eckart de Castilho]

So actually I have something like the above working for me now - but only with wicket-jquery-ui 6.20.1 - as soon as I go any higher than that, the tooltip behavior doesn't work anymore and I only get the plain standard HTML tooltips. 

Any idea what could have changed between 6.20.1 and 6.20.2 that could be breaking this?

Best,

-- Richard

[Sebastien]

Hi Richard,

I don't see anything yet that could have break this...
Could you please copy/paste the code that used to work so I can test on my side?

Thanks in advance,

Sebastien

[Richard Eckart de Castilho]

Hi Sebastien,

I can post you a link to the code, but it is embedded in a non-trivial application:

https://github.com/webanno/webanno/blob/4fcbf7ac458fa583c20119b445d81f6759421f71/webanno-brat/src/main/java/de/tudarmstadt/ukp/clarin/webanno/brat/annotation/component/AnnotationDetailEditorPanel.java#L1736

As soon as I go beyond 6.20.1 in the master POM of this project (below), the styled tooltips turn into normal HTML tooltips.

https://github.com/webanno/webanno/blob/master/pom.xml#L64

I don't know if/when I could get around to setting up a small test case.

But if you have any idea how to debug/what to search for within that large application, I'd try doing that.

Best,

-- Richard

[Sebastien]

Hi Richard,

I think you are facing a javascript issue. Please open Firebug (or equivalent) and copy/paste the message here if it's the case...

Thanks & best regards,

Sebastien.

[Richard Eckart de Castilho]

I tried to investigate again and couldn't reproduce it. Maybe some JS got stuck in browser caches... 

-- Richard

[Richard Eckart de Castilho]

Ok, so I finally came back to this as part of upgrading from Wicket / JQueryUI / Kendo 6.20.x to 7.4.x.

To remind: I wanted to apply JQuery UI styled tooltips to the choices shown in the dropdown of a Kendo Combobox.

First, I found out that the element ID of the HTML wrapper representing the dropdown had changed as part of the upgrade from 6 to 7.

After fixing that, the tooltips worked more or less: they only worked after a AJAX refresh of the Combobox, but not when the page was initially loaded.

The TooltipBehavior is applied in the onInitialize() method of the combobox.

It looks as if on the initial page load, TooltipBehavior is applied *to early*, i.e. at a point in time where the dropdown HTML has not yet been initialized from the datasource. In version 7, the datasource for the Combobox loads asynchronously while in version 6, the data was directly specified as part of the Combobox JS constructor.

I was able to work around this by adding a delay to the TooltipBehavior, such that it triggers only 1 second after the page has loaded.

I also tried to figure out if I could somehow hook into the loading process of the Datasource in order to get notified when the dropdown HTML has been initialized - but that did not work. I could bind additional callbacks to the "sync" event of the Datasource, but the seemed never to be called.

So the bottom-line is: it kind of works again for me now, but I am slightly unhappy with the hard-coded 1s delay. On a slow network connection or for many choices, the latency of loading the datasource might exceed 1s which would then likely break the tooltips. If anybody has a clue about some event/callback to register in order to apply the tooltips, it would be welcome.

Best,

-- Richard

[Sebastien]

Hi Richard,

I would have looked around the datasource's bind event. It would be great to have a callback on it so you can do stuff, but it will result to a dual roundtrip, so not sure that's a good idea...

Still around this, you may generate the tooltip behavior js (using #$()) and add it to the bind js callback. Maybe the autoBind property needs to be set to false.

I will try to have a look later tonight...

Best regards.
Sebastien