純粋な CSS 実装 (スクリプトなし) HTML コマンド スタイルのツールチップ テキスト プロンプト効果

<button tooltip='私はコンテンツダックです' effect='light' placement='top-left'>左上</button>

<div class="コンテナ">
  <div class="top">
    <button tooltip="上" placement="top-left" effect="light">左上</button>
    <button tooltip="左上 左上" placement="top">上</button>
    <button tooltip="右上" placement="右上">右上</button>
  </div>
  <div class="left">
    <button tooltip="左上、左上、左上、左上、左上、左上、左上、左上、左上、左上" placement="left-top">左上</button>
    <button tooltip="左" placement="left" effect="light">左</button>
    <button tooltip="Left-right" placement="left-bottom">左下</button>
  </div>
  <div class="right">
    <button tooltip="右上 右上 右上 右上 右上 右上 右上 右上 右上" placement="right-top">右上</button>
    <button tooltip="右" placement="right" effect="light">右</button>
    <button tooltip="右下" placement="right-bottom">右下</button>
  </div>
  <div class="bottom">
    <button tooltip="左下" placement="左下">左下</button>
    <button tooltip="bottom" placement="bottom" effect="light">下</button>
    <button tooltip="右下" placement="右下">右下</button>
  </div>
</div>

/* ツールチップ属性を持つ要素に一致します */
[ツールチップ]
  位置: 相対的;
  /* バブルのデフォルトスタイル */
  ＆：：後 {
    表示: なし;
    コンテンツ: attr(ツールチップ);
  }
  /* 三角形のデフォルトスタイル*/
  ＆：：前に {
    表示: なし;
    コンテンツ： '';
  }
  /* この要素にマウスを移動すると、バブルと三角形が表示されます*/
  &:ホバー{
    ＆：：後 {
      表示: ブロック;
    }
    ＆：：前に {
      表示: ブロック;
    }
  }
}

/* バブルのデフォルトスタイル */
＆：：後 {
  表示: ブロック;
  コンテンツ: attr(ツールチップ);
}

/* 三角形のデフォルトスタイル*/
＆：：前に {
  表示: ブロック;
  コンテンツ： '';
}

/* バブルのデフォルトスタイル */
＆：：後 {
  表示: ブロック;
  コンテンツ: attr(ツールチップ);
  位置: 絶対;
  空白: ラップなし;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  パディング: 8px 15px;
  最大幅: 200px;
  境界線の半径: 4px;
  ボックスの影: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
  zインデックス: 100;
  @extend .tooltip-theme-dark; /* デフォルトのテーマを継承します (背景は黒、テキストは白) */
 }

/* 三角形のデフォルトスタイル*/
＆：：前に {
  表示: ブロック;
  コンテンツ： '';
  位置: 絶対;
  境界線: 5px 透明実線;
  zインデックス: 100;
  @extend .triangle-theme-dark; /* デフォルトのテーマ（黒の背景）を継承します */
}

$白: #fff;
$黒: #313131;

/* バブルテーマ */
.tooltip-theme-dark {
  色: $white;
  背景色: $black;
}

.tooltip-theme-light {
  色: $black;
  背景色: $white;
  境界線: 1px 実線 $black;
}

/* 三角形のテーマ*/
.triangle-theme-dark {
  上の境界線の色: $black;
}

.三角形テーマライト{
  border-top-color: $black; /* 今のところ dark と同じ*/
}

/* バブルの位置 */

/* -  - 優れた -  - */
.tooltip-placement-top {
  下部: calc(100% + 10px);
  左: 50%;
  変換: translate(-50%, 0);
}

.tooltip-placement-top-right {
  下部: calc(100% + 10px);
  左: 100%;
  変換: translate(-100%, 0)
}

.tooltip-placement-top-left {
  下部: calc(100% + 10px);
  左: 0;
  変換: translate(0, 0)
}

/* 三角形の位置 */

/* -  - 優れた -  - */
.三角形の配置トップ {
  下部: calc(100% + 5px);
  左: 50%;
  変換: translate(-50%, 0);
}

.三角形の配置-左上{
  下部: calc(100% + 5px);
  左: 10px;
}

.三角形の配置-右上{
  下部: calc(100% + 5px);
  右: 10px;
}

&[効果="ライト"] {
  ＆：：後 {
    ツールチップテーマを拡張します。
  }

  ＆：：前に {
    テーマを拡張します。
  }
}

@各$placementを上、右上、左上、
右、右上、右下、
下、右下、左下、
左、左上、左下 {
  &[placement="#{$placement}"] {
    ＆：：後 {
      ツールチップの配置を拡張します。
    }

    ＆：：前に {
      三角形の配置を拡張します。
    }
  }
}

&:not([配置]),
&[配置=""] {
  ＆：：後 {
    ツールチップの配置を上に拡張します。
  }

  ＆：：前に {
    三角形の配置を上に拡張します。
  }
}

@keyframesアニメトップ{
  から {
    不透明度: .5;
    下部: 150%;
  }
}

@keyframesアニメボトム{
  から {
    不透明度: .5;
    上: 150%;
  }
}

@keyframesアニメ左{
  から {
    不透明度: .5;
    右: 150%;
  }
}

@keyframesアニメ右{
  から {
    不透明度: .5;
    左: 150%;
  }
}

/* アニメーションを設定する */
上部の各$placement、
 右、
底、
左
  &[placement^="#{$placement}"] {

    ＆：：後、
    ＆：：前に {
      アニメーション: anime-#{$placement} 300ms 前方へのイーズアウト;
    }
  }
}