Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

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

So positionieren Sie Tooltips mithilfe von CSS richtig

PHPz

Freigeben： 2023-08-29 14:49:02

nach vorne

1085 Leute haben es durchsucht

如何使用 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>

Nach dem Login kopieren

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!

Quelle：tutorialspoint.com

Vorheriger Artikel：Kann man eine Website nur mit HTML und ohne CSS erstellen? Nächster Artikel：7 CSS-Hacks, die jeder Entwickler kennen sollte

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors