Home >Web Front-end >CSS Tutorial >Set left tooltip using CSS

Set left tooltip using CSS

PHPzforward: 2023-09-07 15:29:06939browse

使用 CSS 设置左侧工具提示

To set the left tooltip, use the right CSS property.

You can try running the following code to set the left tooltip to text:

Example

Live Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: orange;
         color: white;
         z-index: 1;
         top: -6px;
         right: 100%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-left: 150px;
      }
      .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 Set left tooltip 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：How to select elements whose attribute value contains a specified word using CSS?Next article：How to select elements whose attribute value contains a specified word using CSS?

See more

Set left tooltip using CSS

Example

Related articles