search

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

Set left tooltip using CSS

PHPz
PHPzforward
2023-09-07 15:29:06911browse

使用 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?

Related articles

See more