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

Verwenden Sie CSS, um den Pfeil auf den unteren Rand der QuickInfo zu zeigen

WBOYnach vorne: 2023-09-08 21:41:06859Durchsuche

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

Verwenden Sie die top CSS-Eigenschaft, um unten im Tooltip einen Pfeil hinzuzufügen.

Beispiel

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

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 .mytext:after {
         content: "";
         position: absolute;
         top: 100%;
         left: 50%;
         margin-left: -10px;
         border-width: 7px;
         border-style: solid;
         border-color: blue transparent transparent 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 unteren Rand der QuickInfo zu zeigen. 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 definiere ich die Form einer animierbaren Ecke mithilfe von CSS?Nächster Artikel：Wie definiere ich die Form einer animierbaren Ecke mithilfe von CSS?

In Verbindung stehende Artikel

Mehr sehen