Question

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

ins{
    color:blue; 
    font-weight:500;
    text-decoration:none;
}

ins:hover{
    cursor: pointer;
    cursor: hand;
    text-decoration:underline;
}

我希望当用户将鼠标悬停在<ins>标记内的文本上时，会弹出一个小工具提示，说明＆＃34;这是插入的文字＆＃34;。

所以，基本上，我们应该修改ins:hover，如下所示：

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

我们可以做出类似的事吗？

如果我们不能那么做那么

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

注意：基本标记表示可以在不需要任何属性的情况下工作的任何标记。出于安全原因，我无法在基本的html标记中使用任何属性。

Answer 1

我创建了一个tooltip demo，它使用jquery来显示工具提示。这可能是一个可能的解决方案。

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

希望这是有用的。

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

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

但是，在整个网站上多次使用这种方法可能会非常麻烦。

Answer 2

这里有一些答案可以解决你的问题

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

Answer 3

有很多很多方法可以从简单的＆＃34;标题＆＃34;正如CBroe的优秀建议所提到的那样，对于非常优雅的lukeocom方法。你可以隐藏一个div，弹出它，并使用一个插件。根据CBroe's和lukeocom的优秀建议，我将一个基本的例子放在一起：之后。

FIDDLE

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

出于纯粹无知的问题，为什么你需要创建一个新的元素＆＃39; ins＆＃39;？

当用户将鼠标悬停在<ins>标签内的文本时，如何制作工具提示弹出窗口？</ins>

3 个答案:

demo jsfiddle

HTML

CSS