css3 フワッとメニューでツールチップを出す方法

aタグにposition: relativeにする、paddingも付ける（疑似要素の基準にする、liよりもaの方が基準にしやすい）
疑似要素":before" ":after"でツールチップを作って、opacity:0;で見えなくしておく
aの":before" ":after"をposition:absolute
aをdisplay:none;にするとtransformが効かない
aにdata-h属性でツールチップの内容を書いておく
aのbeforeのcontent:""の内容をattr(data-h)とする（iconfontのcontentと同じ）
参考サイト意外と知らない!?CSSセレクタ20個のおさらい
afterで三角を作る
参考サイト
- CSSで三角形を作る方法
- CSSだけで簡単に吹き出しを作成する方法4つ！
transitionでふわっと出るスピードを調整
transformとtransform-originでhoverした時の出かたを調整
aがopacity:0;のときtransform: scale(1,1)だと、見えない時もhoverしてしまう
ので、rotateX(90deg)にするかscale(1,0)にする
参考サイト transform:rotate()