タッチスクリーン搭載デバイスでツールチップが表示されない

ホバーはタッチスクリーンを搭載していないマシンでは正常に機能します。マウスやタッチパッドのポインターでホバーが可能であり、例えば以下は共有ボタンにホバーしている様子です:

ただし、タッチスクリーンとマウス/タッチパッドの両方を備えたノートパソコンについては、マウスが接続されているか切断されているかを検出する方法があるかどうかわかりません。

CSS4 のメディア検出でこれを解決できるかどうかも不明です:

タッチスクリーンとマウスの両方として認識されるデバイスでもホバーを有効にできれば理想的です。現在、ユーザーはノートパソコンのタッチスクリーン機能を無効にして動作させることに頼っており、おそらくタッチスクリーン部分はそもそも使っていないためでしょう。

私はこれをテストしました:https://jsfiddle.net/davidThomas/q29r4pjs/3/
その結果は以下の通りでした:

  • デスクトップ :red_circle: マウス
  • iPhone :green_circle: タッチ
  • Surface Pro :red_circle: マウス ← 誤り!

また、https://jsfiddle.net/Blackbam/zkd2cs0t/16/ も同様にテストしましたが、結果は同じでした。タッチスクリーン+マウス付きデバイスは、デスクトップと完全に同じように見えます。