search

SETI / rms-opus

PDS OPUS - Outer Planets Data Search Tool
Apache License 2.0
10 stars 7 forks source link

Switch to using a non-native tooltip library (and add links) #972

Closed rfrenchseti closed 2 years ago

rfrenchseti commented 4 years ago

Under Mojave/Safari, tooltips disappear in 10 seconds, but they don't under Catalina. Michael Aye would like them to not disappear at all under any browser or OS, which I agree with.

matthewtiscareno commented 4 years ago

What would one do about it?

rfrenchseti commented 4 years ago

There are always solutions. Tooltips are not actually a browser feature, they are implemented using the "jQuery UI" library: https://jqueryui.com/tooltip/

Thus we can override that library's behavior, use another third-party library, or implement our own version of tooltips. In fact there is already a need for a different type of tooltip, because "mouse hover" doesn't exist on mobile devices:

https://github.com/SETI/pds-opus/issues/796

A fancier library would also allow things like links inside the tooltips that can be clicked on:

http://qtip2.com/

matthewtiscareno commented 4 years ago

Okay, so the current problem is that different browsers do different things when they see a jQueryUI, and in some cases we don't like the results. The answer is to use something other than jQueryUI, since that doesn't work for mobiles anyway. Have I got it?

rfrenchseti commented 4 years ago

In the long term, yes. In the short term we'll try to find a workaround using jQuery UI for this one particular problem because it will be easier if we can fix a user's complaint without redesigning the whole tooltip system.

juzen2003 commented 4 years ago

I think we can't fix the disappearing native tooltip from title attribute in Safari 12 without converting our tooltip design to either jQuery, Bootstrap or qTip. If we tried native tooltips from other sites in Safari 12, it will disappear too. For example, the tooltips in https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

I tried with jQuery & Bootstrap last night and see some difference between native tooltips and ones from libraries. To create tooltips with libraries, we need to fix at least the following issues:

  1. Tooltips can't go off the viewport. Unlike the native ones, tooltips from libraries will have to stay inside the body tag (or html tag) and can't go off the screen.
  2. Since tooltips can't go off the screen, we need to make sure all our tooltips will fit in the screen when the screen is very small. Some of our tooltips have lots of texts.
  3. Sometimes tooltips need to cover the (i) icon to have the full tooltips info displayed on the screen, this will cause the tooltips flickering issue due to these: a. When mouseover (i) icon and leave the mouse within (i) icon, tooltips pop out. b. Once tooltips pop out and cover the (i) icon, mouseout event on (i) is triggered. And tooltips will disappear. c. Once tooltips disappear, mouseover event on (i) is triggered again and repeat from step a.
rfrenchseti commented 4 years ago

Because this is really the expected behavior in those browsers, I changed this from a bug to an enhancement request and made it about converting to a new tooltip library instead of just fixing the disappearing-tooltip problem under old versions of Safari.

Note that with a new tooltip package, we have other benefits as well - such as HTML formatting and the ability to have links (like "more info") inside of tooltips.