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

此外，为了查看工具提示，我必须在属性“style”的IR“overflow：visible”的所有单元格中编写。除了一个不完美之外，一切都很好：位于“隐藏”类标签“span”内的文本不能通过鼠标选择 - 我只是接收交叉圆而不是任何其他类型的光标。我尝试使用以下Javascript代码来解决方法：

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

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

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

Answer 1

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

以下是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;
}

Answer 2

只需将javascript更改为

即可

$(document).ready(function(){ $("a.tooltip").click(function(){ var str = $(this).find("span.hidden").text(); if (window.clipboardData && clipboardData.setData) { clipboardData.setData("Text", str); } }); });

请注意，您在剪贴板中复制的代码仅适用于Internet Explorer。你必须为它编写一个跨浏览器代码。出于安全原因，浏览器不允许这样做。请找另一种解决方法。

从CSS工具提示中获取文本

2 个答案: