●Streamボタンにマウスオーバーで説明を表示
意図と経緯
ボタンだけだと何のボタンなのかわからないので何かしらわかりやすくしたい
ユーザーメニューの表示に伴いやり方を変更
https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20
https://gyazo.com/2085cabfdb86333861a6cf7047be17fe
ポインタ映ってないけど左側のStreamボタン(Streamへのリンクのボタン)にマウスオーバーで「更新履歴」が表示される
code:style.css
/* Streamボタンを表示 */
.navbar .navbar-menu>li.stream-btn {
display: block;
}
/* マウスオーバーでツールチップ表示 */
.stream-btn .kamon:hover::after {
display: block;
position: absolute;
top: 44px;
content: '更新履歴';
font-size: 12px;
line-height: 16px;
width: 60px;
height: auto;
text-align: center;
}
備考
応急処置的に作ったので挙動がおかしいところあったらすみません