Opened 11 years ago

Closed 8 years ago

#7760 closed defect (fixed)

Tooltip for ComboBox, FilteringSelect not positioned properly

Reported by: stekell2 Owned by: bill
Priority: high Milestone: 1.8
Component: Dijit Version: 1.2beta
Keywords: Combobox FilteringSelect Tooltip Cc:
Blocked By: Blocking:

Description (last modified by bill)

For ComboBox or FilteringSelect, if using a tooltip (dijit.Tooltip with connectId), the tooltip (when on the right) covers up the right portion of the widget rather than being fully to the right of the widget. It covers up the area used by the down arrow. Thus making it seem impossible to use the arrow.

If you use set the promptMessage of the dijit instead, it will be positioned properly - fully to the right of the widget. A dijit.Tooltip should be positioned like this and not cover up the down arrow.

I just verified its still like this in 1.2rc1

Change History (8)

comment:1 Changed 11 years ago by bill

Component: GeneralDijit
Description: modified (diff)
Resolution: wontfix
Status: newclosed

This is admittedly confusing but actually the issue is that you are specifying the wrong connectId to the Tooltip widget. Remember that the connectId is a DOM node id, not a widget id... If you declare a CombobBox with id=foo, then the <input> node itself gets id=foo and the domNode (which wraps the input node AND the arrow) get id=widget_foo. (Check in firebug to see this.)

So if you do <span dojoType=dijit.Tooltip connectId=widget_foo> ... then it should work.

comment:2 Changed 11 years ago by stekell2

Resolution: wontfix
Status: closedreopened

Using connectId=widget_foo creates another problem. The tooltip no longer appear when the input is focused. It only appears on onmouseover. The tooltip should appear when the input receives focus and the user is entering data. This is how it works with connectId=foo. Actually, with connectId=foo it works on both mouseover and focus. Which is good, whereas promptMessage only works on focus. Anyway to get this to work on both?

Also, using widget_foo there's a bizarre positioning problem that remains with Firefox 2 (I haven't tried FF3 yet, but IE7 is ok). I haven't found a consistant way to repeat this, but maybe 10% of the time a mouseover results in the incorrect positioning like before.

comment:3 Changed 11 years ago by bill

Milestone: 1.21.4

Ah, I see your point about the focus events... that's understandable. We connect to the onFocus event on the connectId node but of course the focus event is on the <input> not the surrounding <div>.

Not sure how to fix that; IIRC focus events don't bubble. Might need some more infrastructure to support this properly.

It seems like you should be able to use the validation messages (invalidPrompt etc.) to get tooltips on form widgets. That doesn't solve your problem?

comment:4 Changed 11 years ago by bill

Milestone: 1.4future

comment:5 Changed 9 years ago by Chris Mitchell

Owner: anonymous deleted

comment:6 Changed 9 years ago by bill

Component: DijitDijit - Form

comment:7 Changed 8 years ago by bill

Component: Dijit - FormDijit
Milestone: future1.8
Owner: set to bill
Status: reopenedassigned

OK I think I can check in a fix so that

<span dojoType=dijit.Tooltip connectId=widget_foo>

works.

Like I said above, you shouldn't need to use a tooltip directly for ComboBox / FilteringSelect, but perhaps the fix will be useful in other cases when focus goes somewhere inside the anchor node.

comment:8 Changed 8 years ago by bill

Resolution: fixed
Status: assignedclosed

In [27526]:

Modify Tooltip to respond to focus events that occur inside of the anchor node. Fixes #7760 !strict

Also fixing bug with removing focusin/focusout listeners, exposed by Tooltip_a11y.html test after above change, fixes #14595 !strict. Seems like removing focusin/focusout listeners should be part of dijit/tests/on.html but there's not much point at the moment, because for some reason the focus tests in that file are commented out.

Note: See TracTickets for help on using tickets.