從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

回答

相關問題