javascript - 从 CSS 工具提示中获取文本

Question

大家晚上好!我仍在学习 HTML 和 JavaScript 并完成了以下任务。我在 Oracle Apex 4.2.6.0003 中有一个交互式报告，其中有一列由于其长度(超过五个字)应该变得简短。为了解决这个问题，我想到了使用 CSS 工具提示。该字段内的代码如下所示:

<div class="inside">
 <a class="tooltip" href="#">
  <span class="preview">The first few words from field....</span>
  <br/>see more
  <span class="hidden">The whole text from field</span>
 </a>
</div>

由于动态操作，我使该列具有这种格式。我的代码中使用的 CSS 类是这些:

div.inside{
  display: block;
  z-index: 9900
}
span.preview{
  color: rgb(0,0,0);
}
a.tooltip{
  display: block;
  position: relative;
  text-decoration: none;
}
a.tooltip span.hidden{
  display: none;
  position: absolute;
  z-index: 9990;
}
a.tooltip:hover span.hidden{
  display: block;
  position: absolute;
  z-index: 10000;
  padding: 3px 3px 5px 5px;
  width: 45ch;
  height: auto;
  right: 0ch;
  text-decoration: none;
  background-color: rgb(100,100,0);
  color: rgb(0,0,0);
}

此外，为了查看工具提示，我必须在属性“样式”中的 IR“溢出:可见”的所有单元格中写入。一切都很好，除了一个缺陷:位于“隐藏”类的标签“跨度”内的文本无法通过鼠标选择 - 我只收到交叉圆圈而不是任何其他类型的光标。我尝试使用以下 Javascript 代码来解决问题:

$("a.tooltip").click(function(){
  window.clipboardData.setData('text',$(this).find("span.hidden").html());
  return false;
});

但它根本不起作用 - 它什么都不做。此外，我已经多次读到，将文本不在 Internet Explorer 中获取到剪贴板几乎是不可能的。但我使用的是 Firefox，我应该为这个浏览器编写代码，最好不要更改任何与安全相关的选项。

所以我的问题是:我应该怎么做才能从我的 CSS 工具提示中选择文本并将其复制到剪贴板？

Answer 1

我刚刚删除了 href来自 <a> 的属性标记并为“查看更多”创建了一个跨度类。如果将鼠标悬停在“查看更多”上，将出现一个指针，您仍然可以复制工具提示的内容。

这是 Fiddle

没有使用 js 或 jquery 来启用工具提示内容的复制。这是一种纯 css 方法。

HTML:

<div class="inside">
 <a class="tooltip">
  <span class="preview">The first few words from field....</span>
  <br/>
  <!-- JUST ADDED THE CLASS HOVERABLE -->
  <span class = "hoverable">see more</span>
  <span class="hidden">The whole text from field</span>
 </a>
</div>

CSS:

div.inside{
  display: block;
  z-index: 9900
}
span.preview{
  color: rgb(0,0,0);
}
a.tooltip{
  display: block;
  position: relative;
  text-decoration: none;
}
a.tooltip span.hidden{
  display: none;
  position: absolute;
  z-index: 9990;
}
a.tooltip:hover span.hidden{
  display: block;
  position: absolute;
  z-index: 10000;
  padding: 3px 3px 5px 5px;
  width: 45ch;
  height: auto;
  right: 0ch;
  text-decoration: none;
  background-color: rgb(100,100,0);
  color: rgb(0,0,0);
}

//ONLY CHANGE MADE TO THE EXISTING CSS
.hoverable{
  cursor: pointer;
}