如何使工具提示弹出时，用户鼠标在<ins>标签内的文本？

Question

好的，我有一个定制的<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标记中使用任何属性。

Answer 1

我创建了一个工具提示演示，它使用jquery显示工具提示。这可能是你可能的解决办法。

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

希望这有用。

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

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

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

Answer 2

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

演示小提琴

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);
}

Answer 3

从CBroe的优秀建议中提到的简单的“标题”到非常优雅的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'？