Heim > Artikel > Web-Frontend > Fügen Sie mithilfe von CSS Pfeile zu Tooltips hinzu

Fügen Sie mithilfe von CSS Pfeile zu Tooltips hinzu

王林nach vorne: 2023-08-25 14:57:02882Durchsuche

使用 CSS 在工具提示中添加箭头

Mit CSS können Sie mit :after kleine Pfeile zu Tooltips hinzufügen. Auf diese Weise kann auch das Inhaltsattribut verwendet werden.

Sie können versuchen, den folgenden Code auszuführen, um Pfeile in Tooltips hinzuzufügen:

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 .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 vonFügen Sie mithilfe von CSS Pfeile zu Tooltips hinzu. 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：Erstellen Sie mit CSS eine Fünf-Sterne-FähigkeitsbewertungsspalteNächster Artikel：Erstellen Sie mit CSS eine Fünf-Sterne-Fähigkeitsbewertungsspalte

In Verbindung stehende Artikel

Mehr sehen