Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um den Pfeil auf den oberen Rand der QuickInfo zu richten

Verwenden Sie CSS, um den Pfeil auf den oberen Rand der QuickInfo zu richten

王林nach vorne: 2023-09-06 10:21:02977Durchsuche

使用 CSS 将箭头指向工具提示顶部

Fügen Sie mithilfe der CSS-Eigenschaft bottomeinen Pfeil oben im Tooltip hinzu.

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um einen Tooltip mit einem nach oben zeigenden Pfeil hinzuzufügen:

Live-Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         top: 150%;
         left: 50%;
         margin-left: -60px;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
      }
      .mytooltip .mytext:after {
         content: "";
         position: absolute;
         bottom: 100%;
         left: 50%;
         margin-left: -10px;
         border-width: 3px;
         border-style: solid;
         border-color: transparent transparent blue transparent;
      }
      .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 vonVerwenden Sie CSS, um den Pfeil auf den oberen Rand der QuickInfo zu richten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich mit CSS einen Button-Hover-Animationseffekt?Nächster Artikel：Wie erstelle ich mit CSS einen Button-Hover-Animationseffekt?

In Verbindung stehende Artikel

Mehr sehen