Verwenden Sie vue2+elementui für Hover-Prompts

<Vorlage>
  <div Klasse="hallo">
<!-- <el-tooltip placement="top"> -->

    <!-- <div slot="content">Extern 1<br />Extern 2</div> -->
    <ol Klasse = "Liste-Wrap" @mouseover.stop = "mouseover" @mouseout.stop = "mouseout">
      <li v-for="Seite in Seiten"
          :Schlüssel="site.id">
        <el-tooltip placement="oben">
          <div slot="content">Mehrere Informationszeilen<br />Zweite Informationszeile</div>
          <span>Spanne</span>
        </el-tooltip>
      </li>
    </ol>
    <div v-if="isShow">ol's Eingabeaufforderungsinformationen</div>
     <!-- </el-tooltip> -->
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Hallo Welt",
  Daten () {
    zurückkehren {
      isShow: false,
      Seiten: [
        { id: 'sfdsfsd', name: 'Runoob' },
        { id: 'sfdsfdfdsd', name: 'Google' },
        { id: 'sfdssdffsd', name: 'Taobao' }
      ],
      msg: „Willkommen bei Ihrer Vue.js-App“
    }
  },
  Methoden: {
    Mauszeiger darüber (e) {
      wenn (e.target.tagName === 'OL') {
        dies.isShow = true
        console.log('eingeben', e.target.tagName)
      }
    },
    Mauszeiger (e) {
      wenn (e.target.tagName === 'OL') {
        console.log('verlassen', e.target.tagName)
        this.isShow = false
      }
    }
  }
}
</Skript>

<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
.list-wrap{
  Hintergrundfarbe: #42b983;
}
h1,
h2 {
  Schriftstärke: normal;
}
ul {
  Listenstiltyp: keiner;
  Polsterung: 0;
}
li {
  Anzeige: Inline-Block;
  Rand: 0 10px;
}
A {
  Farbe: #42b983;
}
</Stil>