CSS を使用すると、:after を使用してツールヒントに小さな矢印を追加できます。このように、content 属性も使用できます。 次のコードを実行して、ツールチップに矢印を追加してみてください: Exampleライブ デモ .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; bottom: 100%; left: 60%; margin-left: -90px; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; margin-top: 50px; } .mytooltip .mytext:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-width: 7px; border-style: solid; border-color: blue transparent transparent transparent; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text ログイン後にコピー