Home > Article > Web Front-end > How to position tooltips correctly using CSS

How to position tooltips correctly using CSS

PHPzforward: 2023-08-29 14:49:021004browse

如何使用 CSS 正确定位工具提示

To position the tooltip correctly, use the right, left, top, and Bottom properties.

Let’s see how to position the tooltip on the right:

Example

Live Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         top: -6px;
         left: 100%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
      }
      .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 How to position tooltips correctly using CSS. For more information, please follow other related articles on the PHP Chinese website!

css

Statement：

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

Previous article：Can you make a website using only HTML and no CSS?Next article：Can you make a website using only HTML and no CSS?

See more

How to position tooltips correctly using CSS

Example

Related articles