Vue は、el-popover コンポーネントを使用して、テーブル内にウィンドウをポップアップ表示し、プロンプト情報を表示します。

効果は次のとおりです。入力の上にマウスを移動すると、次のように表示されます。

 ​​​​​​​

 

        <template>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            popper-class="monitor-yt-popover"
          >
            <span>规则：{
   
   { config.unitId }}</span>
            <el-input
              v-model="config.unitId"
              slot="reference"
              type="text"
              @blur="
                getUnitScoreVal()
              "
            ></el-input>
          </el-popover>
        </template>

スタイルは次のとおりです。スコープ付きスタイルタグ内には記述できないことに注意してください。正しくは次のとおりです。

<style>
.el-popover.monitor-yt-popover {
  background-color: #fbfbfb;
  border-color: #f56c6c;
  color: #f56c6c;
}

.monitor-yt-popover .popper__arrow::after {
  border-top-color: #f56c6c !important;
}
</style>