从 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 classes 是这些：

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 "overflow: visible" 的所有单元格中写入属性 "style"。一切都很好，除了一个缺陷：位于 class "hidden" 的标签 "span" 内的文本无法通过鼠标 selected - 我只是收到交叉圆圈而不是任何其他类型的光标。我尝试使用以下 Javascript 代码来解决问题：

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

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

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

Answer 1

我刚刚从 <a> 标签中删除了 href 属性，并为 'see more' 创建了一个跨度 class。如果将鼠标悬停在 'see more' 上，将出现一个指针，您仍然可以复制工具提示的内容。

这是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 工具提示中获取文本

Getting the text from CSS Tooltip

html

javascript

css

jquery

oracle-apex