/*
   tiptools.css

   Copyleft 🄯 2021 Taiji Yamada <taiji@aihara.co.jp>

   usage:

   A stylesheet that displays tooltips in CSS only, without
   Javascript. It is still realized by the common user action
   pseudo-class ':hover', but the display position depends on the
   ancestor element 'text-align: right', and it can be devised so that
   it does not go off the screen. In addition, the tooltip ignores the
   pointer event, eliminating the common frustration that "tooltips
   make it difficult to access the underlying elements".

   ツールチップを Javascript を使わず CSS だけで表示するスタイルシート
   です。よくあるユーザアクション疑似クラス ':hover' による実現には変
   わりませんが、表示位置が親要素の 'text-align: right' に依存して画面
   からはみ出さない工夫ができます。加えて、ツールチップがポインターイ
   ベントを無視しているので、よくある「ツールチップのせいで下に置かれ
   た要素にアクセスしにくい」という苛立ちを解消してあります。

<link rel="stylesheet" href="path_to/tiptools.css"/>

<div				><button class="tooltip">button ⎏<span	class="tip">† open/close customization</span></button></div>
<div				><button class="tooltip"><span		class="tip">† open/close customization</span>⎏ button</button></div>
<div style="text-align: right;"	><button class="tooltip">button ⎏<span	class="tip">† open/close customization</span></button></div>
<div style="text-align: right;"	><button class="tooltip"><span		class="tip">† open/close customization</span>⎏ button</button></div>
*/
.tooltip .tip, .tooltip + .tip {
  display: none;
  position: absolute;
  width: auto;
  padding: .25em;
  margin: .25em;
  background: white;
  border: none; border-radius: .25em;
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .25);
  z-index: 32761;
  pointer-events: none;
}
:not([style*="text-align: right;"]) .tooltip .tip {
  transform: translate(0%, 50%);
}
[style*="text-align: right;"] .tooltip .tip {
  transform: translate(-100%, 50%);
}
.tooltip:hover .tip, .tooltip:hover + .tip {
  display: inline-block;
}

.tooltip + .tip {
  background: #ffffffaa;
  /**/pointer-events: auto;
  transform: translate(-100%, -50%);
}