当鼠标悬停在文本上时如何添加提示框

Question

http://bowser.effectgames.com/~jhuckaby/zeroclipboard/multiple.html http://bowser.effectgames.com/~jhuckaby/zeroclipboard/multiple.html

is there a way to add a tipbox when the mouse hover on the copied text.the tip box say"the text has been copied" thank you. 当鼠标悬停在复制的文本上时，有没有一种添加提示框的方法。提示框说“文本已被复制”，谢谢。

HTML:code HTML：代码

<body>
<div>
 <div class="example" "></div><div>copied text</div>
 <div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
<div class="example" "></div><div>copied text</div>
</div>
</body>

Answer 1

yeah it is: 是啊，就是：

clip.addEventListener('complete', run_my_tipbox);

this will call the function run_my_tipbox when the text has been copied to the clipboard :) 当文本复制到剪贴板时，它将调用函数run_my_tipbox ：）

so you will do something like that: 因此您将执行以下操作：

    <script language="JavaScript">
    var clip = null;

    function run_my_tipbox(){ alert('Text has been copied to the clipboard!'); }

    function init() {
        clip = new ZeroClipboard.Client();
        clip.setHandCursor( true );

        clip.addEventListener('load', my_load);
        clip.addEventListener('mouseOver', my_mouse_over);
        clip.addEventListener('complete', run_my_tipbox);

        clip.glue( 'd_clip_button' );
    }

</script>

hopefully this makes it a bit more clear ;) 希望这可以使它更清楚;）

Answer 2

this is a fully working html file.. you can look what it does, it's pretty simple 这是一个完全可以工作的html文件。您可以看一下它的作用，这非常简单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
    <head> 
        <title>h4kr.com</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta http-equiv="Content-Language" content="de" /> 
        <meta http-equiv="Content-Style-Type" content="text/css" /> 
        <link rel="shortcut icon" href="/favicon.ico" /> 
        <style type="text/css"> 
            body {
                font-size: 62.5%;
                font-family: Verdana, Arial, Helvetica, sans-serif;
            }
            .error-msg {
                font-size: 12px;
                margin: 10px;
                padding: 10px;
                color: #ffffff;
                border: 1px solid #000000;
                background-color: #990000;
                font-weight: bold;
            }
            textarea {
                width: 450px;
                height: 200px;
                border: 1px solid #669966;
                padding: 5px;
            }
            #output {
                height: 200px;
                width: 99%;
                border: 1px solid #669966;
                padding: 5px;
                overflow: auto;
            }
            #outputContent {
                font-size: 13px;
            }
            button {
                width: 450px;
                height: 40px;
            }
            span.label {
                width: 140px;
                display: block;
                float: left;
            }
            span.hidden {
                display: none;
            }
            div#clipboardcontent{
                display:none;
            }
            div#copyclipboardsuccess{
                position: absolute;
                top: 400px;
                left: 20px;
                border: 1px solid #000000;
                background-color: #009900;
                color: #ffffff;
                font-weight: bold;
                font-size: 18px;
                padding: 20px;
                width: 300px;
                height: 60px;
                text-align: center;
                opacity: 0.5;
                z-index: 9999;
            }
            div#errormsg{
                position: absolute;
                top: 150px;
                left: 20px;
                border: 1px solid #000000;
                background-color: #990000;
                color: #ffffff;
                font-weight: bold;
                font-size: 18px;
                padding: 20px;
                width: 300px;
                height: 60px;
                text-align: center;
                opacity: 0.5;
                z-index: 9999;
            }
        </style>
                <script type="text/javascript" src="ZeroClipboard.js"></script>
        <script type="text/javascript">
        ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );
        var clip = null;

    function init() {
        clip = new ZeroClipboard.Client();
        clip.setHandCursor( true );

        clip.addEventListener('load', function (client) {
        });

        clip.addEventListener('mouseOver', function (client) {
            // update the text on mouse over
            clip.setText( document.getElementById('clipboardcontent').innerHTML );
        });

        clip.addEventListener('onComplete', function (client) {
            copyclipboardsuccess();
        });

        clip.glue( 'd_clip_button','d_clip_container');
    }

    function copyclipboardsuccess()
    {
        var o = document.getElementById('copyclipboardsuccess');
        if(o.style.display == 'none')
        {
            o.style.display = 'block';
            setTimeout(copyclipboardsuccess,1000);
        }
        else
        {
            o.style.display = 'none';
        }
    }
    function errormsg()
    {
        var o = document.getElementById('errormsg');
        if(o.style.display == 'none')
        {
            o.style.display = 'block';
            setTimeout(errormsg,2500);
        }
        else
        {
            o.style.display = 'none';
        }
    }

     </script>

        </head> 
<body onload="init();">
<h1>h4kr.com</h1><div id="errormsg" style="display:none">Error!</div><div id="copyclipboardsuccess" style="display:none">Copied to clipboard!</div><form id="form_cid" method="POST" target="output"><h2>Input</h2><textarea id="input_list" name="input_list"></textarea><br/><button type="submit" value="go">Go</button></form>      <h2>Output</h2>
    <iframe src="about:blank" name="output" id="output"></iframe>
    <div id="d_clip_container" style="position:relative">

        <button id="d_clip_button">Copy to clipboard</button>
    </div>
    <div id="clipboardcontent"></div>
</body>

当鼠标悬停在文本上时如何添加提示框

问题描述

2 个解决方案

解决方案1
0 2011-05-17 10:00:36

解决方案2
0 2011-05-17 13:39:53

当鼠标悬停在文本上时如何添加提示框

问题描述

2 个解决方案

解决方案1 0 2011-05-17 10:00:36

解决方案2 0 2011-05-17 13:39:53

解决方案1
0 2011-05-17 10:00:36

解决方案2
0 2011-05-17 13:39:53