ホバープロンプトにはvue2+elementuiを使用する

<テンプレート>
  <div class="hello">
<!-- <el-tooltip placement="top"> -->

    <!-- <div slot="content">外部 1<br />外部 2</div> -->
    <ol class="list-wrap" @mouseover.stop="mouseover" @mouseout.stop="mouseout">
      <li v-for="サイト内のサイト"
          :key="サイトID">
        <el-tooltip placement="top">
          <div slot="content">複数行の情報<br />2 行目の情報</div>
          <span>スパン</span>
        </el-tooltip>
      </li>
    </ol>
    <div v-if="isShow">ol のプロンプト情報</div>
     <!-- </el-tooltip> -->
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'HelloWorld',
  データ （） {
    戻る {
      isShow: false、
      サイト: [
        { id: 'sfdsfsd'、名前: 'Runoob' },
        { id: 'sfdsfdfdsd'、名前: 'Google' },
        { id: 'sfdssdffsd'、名前: 'Taobao' }
      ]、
      メッセージ: 'Vue.js アプリへようこそ'
    }
  },
  メソッド: {
    マウスオーバー（e）{
      if (e.target.tagName === 'OL') {
        this.isShow = true
        console.log('enter', e.target.tagName)
      }
    },
    マウスアウト（e）{
      if (e.target.tagName === 'OL') {
        console.log('leave', e.target.tagName)
        this.isShow = false
      }
    }
  }
}
</スクリプト>

<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
.リストラップ{
  背景色: #42b983;
}
h1,
h2 {
  フォントの太さ: 標準;
}
ul {
  リストスタイルタイプ: なし;
  パディング: 0;
}
li {
  表示: インラインブロック;
  マージン: 0 10px;
}
{
  色: #42b983;
}
</スタイル>