터치스크린 기기에서 툴팁이 표시되지 않습니다

제품 지원
1

이 플러그인은 꽤 직관적인 것 같습니다: 설치, 활성화.

두 가지를 모두 수행했는데, 결과는 다음과 같습니다:

image
image1319×296 20 KB

하지만 툴팁이 표시되지 않습니다 :frowning:
로그인한 상태에서도, 사설 브라우저 창에서도, 로그인하지 않은 상태에서도 마찬가지입니다.
이 문제를 디버깅하는 방법에 대해 아이디어가 있을까요?

아마 제 기대가 완전히 틀린 것일 수도 있습니다… 이 플러그인이 메타(meta)에서 활성화되어 있나요? 플러그인이 활성화되어 있다면 툴팁이 표시되어야 할 것 같은데, 여기에서도 툴팁을 볼 수 없기 때문입니다.

2

터치스크린 노트북에서 테스트 중이신가요? 터치스크린 간섭을 배제하기 위해 Mac에서 테스트해 보시는 것을 권장합니다.

3

이것만 테스트하려고 맥을 사고 싶지는 않았어요 :wink:
하지만 실제로는 터치스크린이 없는 노트북에서(메타에서는 아니지만) 툴팁이 표시됩니다.
터치스크린이 있는 노트북에 연결된 보조 비터치 디스플레이에서는 작동하지 않습니다.

적어도 일부 사용자는 툴팁의 혜택을 볼 수 있을 것입니다.

터치스크린 문제는 버그로 간주됩니까?

4

터치스크린이 없는 기기에서는 hover가 정상적으로 작동합니다. 예를 들어 마우스나 터치패드 포인터를 사용할 때 hover가 작동하며, 아래는 공유 버튼 위에 마우스를 올려둔 모습입니다:

image
image408×194 4.58 KB

하지만 터치스크린과 마우스/터치패드를 모두 갖춘 노트북의 경우.. 마우스가 분리된 상태인지 연결된 상태인지를 감지하는 방법이 있는지 확실하지 않습니다.

CSS4 미디어 쿼리를 통해 이를 수정할 수 있는 방법이 있는지 잘 모르겠습니다:

https://stackoverflow.com/a/52854585/1

https://stackoverflow.com/a/52745820/1

하지만 _터치스크린_과 마우스로 모두 인식되는 기기에서 hover를 허용할 수 있도록 수정할 수 있다면 좋겠습니다. 사용자들이 작동하게 하려고 노트북의 터치스크린을 비활성화하는 경우가 있는데, 아마도 터치스크린 기능을 거의 사용하지 않기 때문일 것입니다.

이것을 테스트해 보았습니다 .. JSFiddle - React, Tailwind, and code Playground 결과는 다음과 같습니다:

  • 데스크톱 :red_circle: 마우스
  • 아이폰 :green_circle: 터치
  • 서피스 프로 :red_circle: 마우스 ← 틀림!

또한 Checking device hover capabilities with JavaScript using interaction media features 도 테스트해 보았는데 동일한 결과였습니다 – 터치스크린 + 마우스 기기는 데스크톱과 동일하게 보입니다.

5

이 문제를 수정하는 fix를 방금 병합했습니다. 이제 마우스를 사용해 탐색하면 터치스크린 기기(크롬북, 서피스 등)에서도 툴팁 플러그인의 호버가 표시됩니다. (터치스크린으로 탐색하는 경우 표시되지 않습니다.)

사이트를 자체 호스팅(self-hosting)하고 있다면, 최근 플러그인 변경 사항을 반영하기 위해 사이트를 다시 빌드(리빌드)해야 합니다.