Community Learn Tools Library Leisure

English

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

How to position tooltips correctly using CSS

PHPz

Release： 2023-08-29 14:49:02

forward

1046 people have browsed it

如何使用 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>

Copy after login

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!

source：tutorialspoint.com

Previous article：Can you make a website using only HTML and no CSS? Next article：7 CSS Hacks Every Developer Should Know

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn