search

kazzkiq / balloon.css

Simple tooltips made of pure CSS
https://kazzkiq.github.io/balloon.css/
MIT License
5.03k stars 448 forks source link

question/feature_request(mobile): sticky hover #152

Open Kristinita opened 3 years ago

Kristinita commented 3 years ago

1. Summary

I couldn’t find, how I can solve sticky hover problem on touch screen devices.

2. MCVE

2.1. Environment

Tested on the BrowserStack:

  1. iPhone 11
  2. iOS 14

2.2. Steps to reproduce

I opened Balloon.css web page → left-click to any Hover me! button → I have taken away the cursor from this button.

2.3. Behavior

2.3.1. Desired

The tooltip disappears after I have taken away the cursor.

2.3.2. Current

Balloon.css sticky hover

The tooltip continues to show.

3. Argumentation

I’m not sure that sticky hover is the best idea.

3.1. Common reasons

Destination, accessibility.

3.2. Details

  1. By default, tooltips should be shown on hover/click/tap. They shouldn’t be shown at other times, this is not their destination.

  2. See the real example:

    Localhost sticky hover

    Due to the non-disappearing tooltip, the site visitor doesn’t see part of the text.

4. Not helped

I tried CSS Media Queries Level 4 and another solutions on the Stack Overflow question, but I didn’t understand how I can apply this to Balloon.css.

Thanks.