吹き出しを作成します。

基本

HTML

<div class="tooltips">Copy To Clipboard</div>

CSS

.tooltips {
  display: inline-block;
  background: #000000;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
}

結果

Copy To Clipboard

吹き出し

HTML

HTMLは変更がありません。

<div class="tooltips">Copy To Clipboard</div>

CSS

borderプロパティを使用して三角形を作成し吹き出しを作成します。

.tooltips {
  position: relative;
  display: inline-block;
  background: #000000;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
}

.tooltips::before {
  content: "";
  /* 三角形 */
  border-width: 10px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
  /* 位置 */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

borderプロパティの三角形については以下を参考にして下さい。

参考

【CSS】borderについて

結果

Copy To Clipboard

最後に

特にありません。