简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  So positionieren Sie Tooltips mithilfe von CSS richtig

So positionieren Sie Tooltips mithilfe von CSS richtig

PHPz
PHPznach vorne
2023-08-29 14:49:021004Durchsuche

如何使用 CSS 正确定位工具提示

Um den Tooltip richtig zu positionieren, verwenden Sie die Eigenschaften rechts, links, oben und unten.

Sehen wir uns an, wie man den Tooltip auf der rechten Seite positioniert:

Beispiel

Live-Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         top: -6px;
         left: 100%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
      }
      .mytooltip:hover .mytext {
          visibility: visible;
      }
   </style>
   <body>
      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>
      </div>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonSo positionieren Sie Tooltips mithilfe von CSS richtig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Kann man eine Website nur mit HTML und ohne CSS erstellen?Nächster Artikel：Kann man eine Website nur mit HTML und ohne CSS erstellen?

In Verbindung stehende Artikel

Mehr sehen