persistent (dialog) tooltips

[edwardsmarkfParticipant]

hello all –

i have found it very useful to have tooltips be persistent. my goal is to have the tooltips hold links and other information. i could have used a windows popup instead, but i find the tooltip option is much closer to what i am looking for.

i needed a mechanism to close the tooltip whenever the cursor moved off the target element, or the cursor is moved off the tooltip. with much help and patience, here is what i have so far:

http://jsfiddle.net/edwardsmarkf/9fLD9/

the code “determines” the mouse direction. if its headed downward ( in my example between 110 degrees and 250 degrees) i assume the cursor is headed toward the tooltip.

i am using the ==Removed Link due to Forum Policy violation== as my guide, second link from bottom on left side.

if anybody has any other ideas or suggestions i would appreciate hearing them.

[DimitarParticipant]

Hello edwardsmarkf,

A similar effect can be achieved if you set autoHideDelay to 0. Then the tooltip will only hide when you leave it or its target element. However, if you have a gap between the tooltip and the target and move over it, the tooltip will hide. That is why suitable position settings also have to be used.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[edwardsmarkfParticipant]

Dimitar – it appears you have come up with a suggestion that is far cleaner, easier, and drastically better than what i originally proposed.

here is an example of your suggestion in action:

http://jsfiddle.net/edwardsmarkf/w65s2/

the only problem is occasionally the tooltip disappears. i cant seem to determine what the pattern is. i purposely moved the “top” higher so there should be no way to accidentally stop in the gap between the triggering item and the tooltip.

once again, any more suggestions are very appreciated. and thank you for your suggestion.

<<i apologize for not adhering to the forum policy>>

[DimitarParticipant]

Hi edwardsmarkf,

Thank you for your feedback. The issue comes from the fact that the arrow is not recognised as a part of the tooltip. We will consider improving this behaviour in a future version of jQWidgets.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[edwardsmarkfParticipant]

dimitar – can you recommend a simple “workaround” for this? is there a way i can manually include the little arrow using some css or jquery workaround ?

<div id="jqxtooltipad4ceb79Arrow" class="jqx-widget jqx-widget-arctic jqx-fill-state-normal jqx-fill-state-normal-arctic jqx-tooltip-arrow jqx-tooltip-arrow-arctic jqx-tooltip-arrow-t-b jqx-tooltip-arrow-t-b-arctic" style="border-width: 0px 5px 5px; top: 1px; left: 93px;"></div>

i am wondering if i can include the “jqx-tooltip-arrow” class somewhere to achieve the desired behavior.

your solution much better than mine and i wish to go with your solution instead.

[DimitarParticipant]

Hi edwardsmarkf,

This can only be handled internally. However, you may hide the arrow with showArrow: false or use one of the position options with no arrow – “absolute” or “mouse”.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[edwardsmarkfParticipant]

hello all – thanks to Dimitar i have something that should work:

http://jsfiddle.net/edwardsmarkf/w65s2/

this approach is far better than my original suggestion. as always, any more suggestions are most welcome. i will end up with hundreds of links, and this approach appears to be easily scalable.

The issue comes from the fact that the arrow is not recognised as a part of the tooltip. We will consider improving this behaviour in a future version of jQWidgets

i will look forward to hopefully seeing this behavior !

[Author]

Posts