如何单击以显示CSS工具提示?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (40)

我刚开始使用CSS和HTML,我一直在尝试用CSS创建一个工具提示,到目前为止,HTML已经取得了成功。但是现在想知道,如果可能的话,如何使这个工具提示只在单击时出现。当再次单击时消失。下面是我使用的HTML代码。

HTML

class='tooltips' style ='color:#585858; text decoration:none;'> desktop NG information

请问如何单击以显示CSS工具提示?

提问于
用户回答回答于

HTML代码

<a href="#" title="Sample tooltip" class="tooltip">Link</a>

CSS代码

.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}

.tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   bottom:18px;
   color:#fff;
   content:attr(title);
   display:block;
   left:50%;
   padding:5px 15px;
   position:absolute;
   white-space:nowrap;
   z-index:98
  }
.tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:12px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
   }

(onlcik事件在CSS中不支持)

扫码关注云+社区

领取腾讯云代金券