Tooltip Error: First, It shows in a single line and then, in multiple lines

[omhardb]

I try to put a tooltip in each item of a combo but the tooltip don't works fine when it's created.

In order to create tooltips I get the panel of the combo:

var comboPanel = $('#' + comboName).combobox('panel');

Then find divs with combobox-item class and for each of them I create each tooltip:

comboPanel.find ('div.combobox-item').each (function (index) {
   var $item = $(this);
   var title = "";
   .... (in this part, I get the title value for each item)
                
   $item.tooltip({
          position: 'right',
          content: '<span style="font-size: 87%;">'+title+'</span>'
   });
});

When I dropdown the combo and put the mouse over item, in a first time the tooltip looks in the left (no 'right') and in a single line (see the first attachment). When I put the mouse over the same item in a second time the tooltip looks in the rigth and in multiple lines (see the second attachment).

I believe this could be a mistake in the creation or viewing of the tooltip.

Regards,

[stworthy]

If the tooltip displaying on the right exceed the edge of page, it will try to adjust to display on the left. Your tooltip message is too long to display in single line, a possible solution to solve this issue is to limit the tooltip width.

Code:

   $item.tooltip({
          position: 'right',
          content: '<div style="max-width:200px;font-size: 87%;">'+title+'</div>'
   });