从CSS获取文本Tooltip

祝大家晚上愉快！我仍在学习HTML和JavaScript，并得到以下任务。我在Oracle Apex 4.2.6.0003中有一个交互式报告，其中有一列由于其长度（超过五个字）应该简短。为了解决这个问题，我想出了使用CSS工具提示。该字段内的代码如下所示：从CSS获取文本Tooltip

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

由于Dynamic Action，我使该列具有此格式。而在我的代码中使用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的所有β-细胞写“溢出：可见”属性中的“风格”。除了一个缺陷外，一切都很好：位于“隐藏”类的标签“span”内的文本不能通过鼠标选择 - 我只接收交叉圆而不是任何其他类型的光标。我试图使用以下Javascript代码来解决问题：

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

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

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

来源

2016-08-16 PiggyInTheMirror

那么你想要做的是从工具提示中提取HTML /文本内容，然后显示它的权利？你是否想要一个外部按钮来显示该工具提示的内容到一个文本区域，这样你就可以复制它，或者你想像这样复制内容？ – hulkinBrain

真正有助于向所有可能帮助的人解释这个问题，在apex.oracle.com上创建一个页面将非常有帮助。特别是对于js或css人来说，检查并试图提供帮助，访问apex页面可能会避免出现顶点无效的答案。只是一个提示！ – Tom

我刚刚从<a>标记中删除了href属性，并为'see more'创建了一个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; 
}

来源

2016-08-16 17:21:40 hulkinBrain

非常感谢！它真的有效。 – PiggyInTheMirror

没问题@PiggyInTheMirror乐意帮忙：D干杯！ – hulkinBrain

只是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中使用。你必须为它编写一个跨浏览器代码。出于安全原因，浏览器不允许它。请找到另一种解决方法。

来源

2016-08-16 18:22:15

从CSS获取文本Tooltip

回答

相关问题