简体   繁体   English

从javascript中的工具提示复制文本?

[英]Copying text from tool-tip in javascript?

Is there any way to copy text from tool tip without using any addition plugins in javascript? 有没有办法在不使用javascript中任何附加插件的情况下从工具提示复制文本?

For Example : 例如 :

<tr>
    <td title="NitiN">NitiN</td>
<tr>

when i hover on td tag it show me tooltip and that contains string "NitiN". 当我将鼠标悬停在td标签上时,会显示工具提示,其中包含字符串“ NitiN”。 So,I want allow users to select texts on tooltip without using any addition JS plugins 因此,我希望用户无需使用任何其他JS插件即可在工具提示上选择文本

You need something like this 你需要像这样
HTML HTML

<table><tbody>  
    <tr>  
        <td title="Mouse over me o_O">I'm just td</td>  
    </tr>  
</tbody></table>  
<div title="Thanks, man!">Hover me!</div>  

CSS CSS

.tooltip {  
    display: none;  
    position: absolute;  
    left: 0;  
    top: 100%;  
    z-index: 2;  
    background-color: grey;  
    border: 1px solid black;  
    border-radius: 10px;  
    padding: 10px;  
    min-width: 200px;  
}  

JS JS

window.addEventListener( "load", function( windowLoadE ) {  
    var elements = document.body.querySelectorAll( "[title]" );  
    for ( var i = 0; i < elements.length; i++ ) {  
        elements[ i ].style.position = "relative";  
        var tooltip = document.createElement( "div" );  
        tooltip.setAttribute( "class", "tooltip" );  
        tooltip.innerText = elements[ i ].getAttribute( "title" );  
        elements[ i ].appendChild( tooltip );  
        elements[ i ].addEventListener( "mouseenter", function( elMouseEneterE ) {  
            var tooltip = this.querySelector( "div.tooltip" );  
            tooltip.style.display = "inline";  
        } );  
        elements[ i ].addEventListener( "mouseleave", function( elMouseEneterE ) {  
            var tooltip = this.querySelector( "div.tooltip" );  
            tooltip.style.display = "none";  
        } );  
    }  
} );  

But better use any plugin, like this . 但是,最好使用任何插件,像这样

You can simply use .text() in mouse enter using jquery; 您可以使用jquery在鼠标输入中简单地使用.text();

 var copy =$(this).text();

in JavaScript 在JavaScript中

var copy =this.innerHTML;

尝试这样的事情

 var copy =$('#td_id').attr('title');

check this link, Use plugins as its not default behaviour of tooltip to stay opened on hover for copying . 选中此链接,将plugins用作其非默认的工具提示行为,以使其在悬停时保持打开状态以进行复制。

here and 在这里

here 这里

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM