【CSS】【js】CSSとJavaScriptだけで簡単に吹き出し型のポップアップを実装する方法

CSS超初心者です。

ですが、jQueryなんかはCSS以上に分からないので、
今回はCSSだけで吹き出し型のポップアップを簡単に実装できる方法を載せます。

HTML

<div id="main">
  <div id="target" onMouseover="openPopUp()" onMouseout="closePopUp()">
    この部分にマウスカーソルが乗るとポップアップが出ます。
　　　　<div id="fukidashi" onMouseover="openPopUp()" onMouseout="closePopUp()">
       吹き出しポップアップの中身
　　　　<div>
  </div>
</div>

まずはHTML。
target部分のonMouseoverとonMouseoutにそれぞれポップアップの表示・非表示メソッドをセットします。
（メソッドの中身については後述）

なお、今回自分が実装したかったものは、ポップアップ上でメニューを選択するようなもので、
target領域からマウスが離れても、
fukidashi上に乗っている限りはポップアップが消えないようにしたかったため、
fukidashi部分にも同様にポップアップの表示・非表示メソッドをセットしてあります。

JavaScript

function closePopUp() {
  fukidashi.style.display = "none";
}
function openPopUp() {
  closePopUp();
  fukidashi.style.display = "block";
}

続いてJavaScript。
マウスオーバー・マウスアウト時にはこれらのメソッドが呼ばれ、
fukidashi領域の表示設定を書き替えます。

CSS

div#main{
  position: relative;
}

div#fukidashi{
  position: absolute;
  top: 32px;
  left: 240px;
  display: none;
  margin: 0px;
  padding: 0px;
  width: 120px;
  background-color: #0000cd;
}

div#fukidashi:before {
  content:" ";
  position: absolute;
  top: -24px;
  left: 8px; 
  z-index:1;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-bottom-color: #0000cd;
}

最後にCSS。

まずは吹き出しの位置調整についてですが、
親要素のpositionをrelativeに、ポップアップ要素のpositionをabsoluteに指定することで、
親要素の座標を基準にポップアップの座標を決められます。
これにより、画面サイズが変わったりしてもポップアップの位置がずれなくて安心。

そしてポップアップを吹き出し化するための三角形部分ですが、
こちらはポップアップのbeforeで描画します。
本当は三角形ではなく四角形のborderの一部なのですが、
まぁその辺についてはこちらのサイトをご参照ください。

以上が吹き出し型のポップアップをCSSのみで簡単に実装する方法です。
ただ、三角形の作り方に汎用性がなく、直角三角形でしか吹き出せないので、
次はもっと汎用的に三角形を描画する方法を探したいですね。