如何使一个工具提示弹出当用户鼠标在文本<标签

How to make a tooltip popup when user mouses over a text inside <ins> tag?

本文关键字：文本 标签 鼠标 用户 何使一 工具提示      更新时间：2023-09-26

好的，我有一个自定义的<ins>标签如下:

ins{
    color:blue; 
    font-weight:500;
    text-decoration:none;
}
ins:hover{
    cursor: pointer;
    cursor: hand;
    text-decoration:underline;
}

我想当用户鼠标在<ins>标签内的文本，然后一个小的工具提示将弹出，说"这是插入的文本"。

所以，基本上，我们应该像这样修改ins:hover:

ins:hover{
    cursor: pointer;
    cursor: hand;
    text-decoration:underline;
    tooltip:"This is inserted text";
}

我们能做到那样吗?

如果我们不能那样做，那么

是否有任何html基本标签，有工具提示弹出，这符合我的要求?

注意:基本标签是指不需要任何属性就可以工作的任何标签。出于安全原因，我不能在基本html标签中使用任何属性。

我创建了一个工具提示演示，它使用jquery来显示工具提示。

它使用div容器来存储单独的工具提示，当用户将鼠标悬停在触发点上时，这些提示将被显示/显示并定位。每个触发器通过指定工具提示id链接到单个工具提示。工具提示的位置基于鼠标光标的位置和触发点相对于窗口的位置(如果窗口已向下滚动)。

希望这是有用的。

css解决方案可能使用content:规则。也可能使用:before或:after选择器。

ins:hover::after{content:"tooltip text"};

但是，当在整个站点中多次使用时，这种方法可能会变得非常麻烦。

这里有一些答案，希望能解决你的问题

演示jsfiddle

html 

  <div class="wrapper">
    I have a tooltip.
    <div class="tooltip">I am a tooltip!</div>
  </div>
css 

.wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
}
.wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  
.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

有很多很多方法可以做到这一点，从CBroe的优秀建议中提到的简单的"title"到非常优雅的lukeocom方法。您可以隐藏div，然后弹出它，并使用插件。基于CBroe和lukeocom的优秀建议，我用:after拼凑了一个基本的例子。

小提琴CSS 

ins{
    color:blue; 
    font-weight: 500;
    text-decoration:none;
    position: relative;
}
ins:hover{
    cursor: pointer;
    cursor: hand;
    text-decoration:underline;
}
ins:after {
    content: 'This is the inserted text';
    display: none;
    width: 100px;
    color: white;
    border: 1px solid red;
    background-color: green;
    position: absolute;
    left: 100%;
    top: 10px;
}
ins:hover:after {
   display: inline-block;
}

和一个纯粹出于无知的问题，为什么你需要创建一个新的元素'ins'?

相关文章：