Home > Article > Web Front-end > Add arrows to tooltips using CSS

Add arrows to tooltips using CSS

王林forward: 2023-08-25 14:57:02834browse

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

With CSS, you can add small arrows to tooltips using :after. This way, the content attribute can also be used.

You can try running the following code to add an arrow in the tooltip:

Example

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>

The above is the detailed content of Add arrows to tooltips using CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Create a five-star skill rating column using CSSNext article：Create a five-star skill rating column using CSS

See more

Add arrows to tooltips using CSS

Example

Related articles