简体中文（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  >  Legen Sie den linken Tooltip mit CSS fest

Legen Sie den linken Tooltip mit CSS fest

PHPz
PHPznach vorne
2023-09-07 15:29:06877Durchsuche

使用 CSS 设置左侧工具提示

Um den linken Tooltip festzulegen, verwenden Sie die CSS-Eigenschaft right .

Sie können versuchen, den folgenden Code auszuführen, um den linken Tooltip auf Text zu setzen:

Beispiel

Live-Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: orange;
         color: white;
         z-index: 1;
         top: -6px;
         right: 100%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-left: 150px;
      }
      .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 vonLegen Sie den linken Tooltip mit CSS fest. 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：Wie wähle ich mit CSS Elemente aus, deren Attributwert ein bestimmtes Wort enthält?Nächster Artikel：Wie wähle ich mit CSS Elemente aus, deren Attributwert ein bestimmtes Wort enthält?

In Verbindung stehende Artikel

Mehr sehen