Heim > Artikel > Web-Frontend > Legen Sie den oberen Tooltip mit CSS fest

Legen Sie den oberen Tooltip mit CSS fest

王林nach vorne: 2023-09-13 12:01:02923Durchsuche

使用 CSS 设置顶部工具提示

Um den oberen Tooltip festzulegen, verwenden Sie die CSS-Eigenschaft bottom.

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

Beispiel

Live-Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         bottom: 100%;
         left: 60%;
         margin-left: -90px;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-top: 50px;
      }
      .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 oberen 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：Animationseffekte in CSSNächster Artikel：Animationseffekte in CSS

In Verbindung stehende Artikel

Mehr sehen