Tooltip in combobox

[Gerard Eikelboom]

Hi,
I have a combobox and sometimes the content is larger then the combobox itself.
So i wonder if there is someting like a tooltip on when I do a mouseover on the combobox it shows the content of the selected item.

Regards,
Gerard

[Georgi Krustev]

Hello Gerard Eikelboom,

 
In order to achieve your goal you will need to modify LI elements of the items list pop-up. You can accomplish this task with something like this:

function comboBoxOnLoad(e){
   var combobox = $(this).data("tComboBox");
   var dropdown = combobox.dropdown;
   if(dropdown.$items){
       $.each(dropdown.$items, function(index, item){
            $(item).attr("title", "you title here");
       });
   } else {
      combobox.fill(function(){
      $.each(dropdown.$items, function(index, item){
            $(item).attr("title", "you title here");
       });
      });
   }
}

Please note that the code is not tested.

Best regards,
Georgi Krustev
the Telerik team

[Poqwe]

Hi!

I think Georgi's solution only adds tooltips to each individual item in the list (you see them when you open the dropown) but not for the actual combobox/dropdown, right?

I think the original question (and my problem also) was how to add tooltip for the actual combobox component/control so that it is shown when you hover over the combobox without opening it.

Any ideas anyone?


Best regards,
Tommi

[John DeVight]

Hi Gerard and Poqwe,

The Telerik ComboBox displays the selected item in an input element.  The name of the input element is the name given to the Telerik ComboBox, a dash and then the word: input.  So, if I have a Telerik ComboBox called combobox, the input element will be called combobox-input.  If you add an event handler to the OnChange client event, you can se the title attribute of the input element within the Telerik ComboBox and it will display as a tooltip.

Here is an example of a Telerik ComboBox with hard coded values that defines an event handler for the OnChange event:

@{
    Html.Telerik().ComboBox()
        .Name("combobox")
        .Items(items =>
        {
            items.Add().Text("Item 1 with a lot of text that is displayed in it that it becomes difficult to see");
            items.Add().Text("Item 2 with a lot of text that is displayed in it that it becomes difficult to see");
            items.Add().Text("Item 3 with a lot of text that is displayed in it that it becomes difficult to see");
            items.Add().Text("Item 4 with a lot of text that is displayed in it that it becomes difficult to see");
            items.Add().Text("Item 5 with a lot of text that is displayed in it that it becomes difficult to see");
        })
        .ClientEvents(events => events.OnChange("combobox_onChange"))
        .Render();
}

Here is the combobox_onChange event handler that will display the selected item as a tooltip:

<script type="text/javascript">

    combobox_onChange = function (e) {
        $('#combobox-input').attr('title', e.value);
    }

</script>

Hope this helps.

Regards,

John DeVight

[Mike]

I used the suggested function:

function comboBoxOnLoad(e){

   var combobox = $(this).data("tComboBox");

   var dropdown = combobox.dropdown;

   if(dropdown.$items){

       $.each(dropdown.$items, function(index, item){

            $(item).attr("title", "you title here");

       });

   } else {

      combobox.fill(function(){

      $.each(dropdown.$items, function(index, item){

            $(item).attr("title", "you title here");

       });

      });

   }

}

and it works great for simply clicking on the drop down list, but as soon as I type something into the input (to filter an item) this change no longer works, even though the function is still being called.  I stepped through the function call and it is still applying the attributes to each item, but I believe they are either being removed later on, or the attribute should be applied to different items.
Any idea what to do? Thanks

[Mike]

Does anyone have an idea?  It seems that the items are getting refreshed by another callback and the attributes I added are being removed.  I stepped through it in the debugger and the last callback was OnDataBound() which then applied the attributes.  But when the list shows up on the webpage, theres no attributes on the <LI> items.  This only happens when I filter something, it works properly otherwise.