在点击鼠标后显示工具提示，当鼠标悬停时

我有一个剪贴板工具提示按钮脚本，当鼠标悬停在上面时，它显示工具提示。在点击鼠标后显示工具提示，当鼠标悬停时

在Clipboard page下复制文本从属性例如，它显示工具提示后点击复制，而悬停什么也不做。

而这正是我想要的。因为我只有成功显示悬停时的工具提示。

我曾尝试与Clipboard pagemain.css和primer.css，并没有发挥得到它的工作，因为我想（显示工具提示后点击）

又看了看tooltip creator documentation，但即使在那里有只悬停工具提示。

这里是HTML代码：

<div id="example-text" class="example"> 
    <div class="table"> 
     <div class="table-row"> 
      <div class="table-cell">ebay</div> 
      <div class="table-cell">amazon</div> 
     </div> 
     <div class="table-row"><p></p></div> 
     <div class="table-row"> 
      <div class="table-cell"><button class="btn" data-clipboard-text="ebay">ebay-link</button></div> 
      <div class="table-cell"><button aria-label="copied!" class="btn tooltipped tooltipped-e border p-2 mb-2 mr-2 left" data-clipboard-text="amazon">amazon-link</button></div> 
     </div> 
    </div> 

    <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>  
</script>  
    <script> 
    var clipboard = new Clipboard('.btn'); 

    clipboard.on('success', function(e) { 
     console.log(e); 
    }); 

    clipboard.on('error', function(e) { 
     console.log(e); 
    }); 
    </script>

这里是CSS：

#example-text {width: 500px;} 
    .table 
{ 
    display:table; 
    text-align: center; 
} 

.table-row 
{ 
    display:table-row; 
    width: 400px; 
} 

.table-cell 
{ 
    display:table-cell; 
    width: 200px; 
    color: black; 
    font-family: arial; 
    font-size: 14px; 
} 


.btn[disabled] .clippy { 
    opacity: .3; 
} 

.example { 
    position: relative; 
    margin: 15px 0 0; 
    padding: 39px 19px 14px; 
    background-color: #fff; 
    border-radius: 4px 4px 0 0; 
    border: 1px solid #ddd; 
    z-index: 2; 
} 

.example p { 
    color: #666; 
} 

.example:after { 
    content: "copy the link"; 
    position: absolute; 
    top: 0; 
    right: 0; 
    padding: 2px 8px; 
    font-size: 14px; 
    font-weight: bold; 
    background-color: #f5f5f5; 
    color: #9da0a4; 
    border-radius: 4px 0 4px 0; 
} 

.example+.snippet { 
    background: #f8f8f8; 
    border-radius: 4px; 
    border: 1px solid #ddd; 
    clear: both; 
    top: -20px; 
    padding: 20px 0 0; 
} 


button, 
input, 
optgroup, 
select, 
textarea { 
    color: inherit; 
    font: inherit; 
    margin: 0 
} 

button { 
    overflow: visible 
} 

button, 
select { 
    text-transform: none 
} 

button, 
html input[type="button"], 
input[type="reset"], 
input[type="submit"] { 
    -webkit-appearance: button; 
    cursor: pointer 
} 

button[disabled], 
html input[disabled] { 
    cursor: default 
} 

button::-moz-focus-inner, 
input::-moz-focus-inner { 
    border: 0; 
    padding: 0 
} 

input { 
    line-height: normal 
} 

input[type="checkbox"], 
input[type="radio"] { 
    box-sizing: border-box; 
    padding: 0 
} 

input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    height: auto 
} 

input[type="search"] { 
    -webkit-appearance: textfield; 
    box-sizing: content-box 
} 

input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-decoration { 
    -webkit-appearance: none 
} 


.form-control.focus, 
.form-control:focus, 
input[type="text"].focus, 
input[type="text"]:focus, 
input[type="password"].focus, 
input[type="password"]:focus, 
input[type="email"].focus, 
input[type="email"]:focus, 
input[type="number"].focus, 
input[type="number"]:focus, 
input[type="tel"].focus, 
input[type="tel"]:focus, 
input[type="url"].focus, 
input[type="url"]:focus, 
select.focus, 
select:focus, 
textarea.focus, 
textarea:focus { 
    border-color: #51a7e8; 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5) 
} 

select:not([multiple]) { 
    height: 34px; 
    vertical-align: middle 
} 

input.input-contrast, 
.input-contrast { 
    background-color: #fafafa 
} 

input.input-contrast:focus, 
.input-contrast:focus { 
    background-color: #fff 
} 

::-webkit-input-placeholder { 
    color: #aaa 
} 

::-moz-placeholder { 
    color: #aaa 
} 

:-ms-input-placeholder { 
    color: #aaa 
} 

::placeholder { 
    color: #aaa 
} 

input.input-mini { 
    min-height: 26px; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    font-size: 12px 
} 

input.input-large { 
    padding: 6px 10px; 
    font-size: 16px 
} 

.input-block { 
    display: block; 
    width: 100% 
} 

.input-monospace { 
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace 
} 


.select { 
    display: inline-block; 
    max-width: 100%; 
    padding: 7px 24px 7px 8px; 
    vertical-align: middle; 
    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center; 
    background-size: 8px 10px; 
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075); 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding-right: 8px \9; 
    background-image: none \9 
} 

.select:focus { 
    outline: none; 
    border-color: #51a7e8; 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5) 
} 

.select::-ms-expand { 
    opacity: 0 
} 

.select-sm { 
    padding-top: 3px; 
    padding-bottom: 3px; 
    font-size: 12px 
} 

.select-sm:not([multiple]) { 
    height: 26px; 
    min-height: 26px 
} 

.clearfix:before { 
    display: table; 
    content: "" 
} 

.clearfix:after { 
    display: table; 
    clear: both; 
    content: "" 
} 


.btn { 
    position: relative; 
    display: inline-block; 
    padding: 6px 12px; 
    font-size: 13px; 
    font-weight: bold; 
    line-height: 20px; 
    color: #333; 
    white-space: nowrap; 
    vertical-align: middle; 
    cursor: pointer; 
    background-color: #eee; 
    background-image: linear-gradient(#fcfcfc, #eee); 
    border: 1px solid #d5d5d5; 
    border-radius: 3px; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-appearance: none 
} 

.btn i { 
    font-style: normal; 
    font-weight: 500; 
    opacity: 0.6 
} 

.btn .octicon { 
    vertical-align: text-top 
} 

.btn .counter { 
    text-shadow: none; 
    background-color: #e5e5e5 
} 

.btn:focus { 
    text-decoration: none; 
    border-color: #51a7e8; 
    outline: none; 
    box-shadow: 0 0 5px rgba(81, 167, 232, 0.5) 
} 

.btn:focus:hover, 
.btn.selected:focus { 
    border-color: #51a7e8 
} 

.btn:hover, 
.btn:active, 
.btn.zeroclipboard-is-hover, 
.btn.zeroclipboard-is-active { 
    text-decoration: none; 
    background-color: #ddd; 
    background-image: linear-gradient(#eee, #ddd); 
    border-color: #ccc 
} 

.btn:active, 
.btn.selected, 
.btn.zeroclipboard-is-active { 
    background-color: #dcdcdc; 
    background-image: none; 
    border-color: #b5b5b5; 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) 
} 

.btn.selected:hover { 
    background-color: #cfcfcf 
} 

.btn:disabled, 
.btn:disabled:hover, 
.btn.disabled, 
.btn.disabled:hover { 
    color: rgba(102, 102, 102, 0.5); 
    cursor: default; 
    background-color: rgba(229, 229, 229, 0.5); 
    background-image: none; 
    border-color: rgba(197, 197, 197, 0.5); 
    box-shadow: none 
} 

.btn-primary { 
    color: #fff; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); 
    background-color: #60b044; 
    background-image: linear-gradient(#8add6d, #60b044); 
    border-color: #5ca941 
} 

.btn-primary .counter { 
    color: #60b044; 
    background-color: #fff 
} 

.btn-primary:hover { 
    color: #fff; 
    background-color: #569e3d; 
    background-image: linear-gradient(#79d858, #569e3d); 
    border-color: #4a993e 
} 

.btn-primary:active, 
.btn-primary.selected { 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
    background-color: #569e3d; 
    background-image: none; 
    border-color: #418737 
} 

.btn-primary.selected:hover { 
    background-color: #4c8b36 
} 

.btn-primary:disabled, 
.btn-primary:disabled:hover, 
.btn-primary.disabled, 
.btn-primary.disabled:hover { 
    color: #fefefe; 
    background-color: #add39f; 
    background-image: linear-gradient(#c3ecb4, #add39f); 
    border-color: #b9dcaC#b9dcaC#a7c89b 
} 

.btn-danger { 
    color: #900 
} 

.btn-danger:hover { 
    color: #fff; 
    background-color: #b33630; 
    background-image: linear-gradient(#dc5f59, #b33630); 
    border-color: #cd504a 
} 

.btn-danger:active, 
.btn-danger.selected { 
    color: #fff; 
    background-color: #b33630; 
    background-image: none; 
    border-color: #9f312c 
} 

.btn-danger.selected:hover { 
    background-color: #9f302b 
} 

.btn-danger:disabled, 
.btn-danger:disabled:hover, 
.btn-danger.disabled, 
.btn-danger.disabled:hover { 
    color: #cb7f7f; 
    background-color: #efefef; 
    background-image: linear-gradient(#fefefe, #efefef); 
    border-color: #e1e1e1 
} 

.btn-danger:hover .counter, 
.btn-danger:active .counter, 
.btn-danger.selected .counter { 
    color: #b33630; 
    background-color: #fff 
} 

.btn-outline { 
    color: #4078c0; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #e5e5e5 
} 

.btn-outline .counter { 
    background-color: #eee 
} 

.btn-outline:hover, 
.btn-outline:active, 
.btn-outline.selected, 
.btn-outline.zeroclipboard-is-hover, 
.btn-outline.zeroclipboard-is-active { 
    color: #fff; 
    background-color: #4078c0; 
    background-image: none; 
    border-color: #4078c0 
} 

.btn-outline:hover .counter, 
.btn-outline:active .counter, 
.btn-outline.selected .counter, 
.btn-outline.zeroclipboard-is-hover .counter, 
.btn-outline.zeroclipboard-is-active .counter { 
    color: #4078c0; 
    background-color: #fff 
} 

.btn-outline.selected:hover { 
    background-color: #396cad 
} 

.btn-outline:disabled, 
.btn-outline:disabled:hover, 
.btn-outline.disabled, 
.btn-outline.disabled:hover { 
    color: #767676; 
    background-color: #fff; 
    background-image: none; 
    border-color: #e5e5e5 
} 

.btn-with-count { 
    float: left; 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0 
} 

.btn-sm { 
    padding: 2px 10px 
} 


.tooltipped { 
    position: relative 
} 

.tooltipped:after { 
    position: absolute; 
    z-index: 1000000; 
    display: none; 
    padding: 5px 8px; 
    font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 
    color: #fff; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: none; 
    text-transform: none; 
    letter-spacing: normal; 
    word-wrap: break-word; 
    white-space: pre; 
    pointer-events: none; 
    content: attr(aria-label); 
    background: rgba(0, 0, 0, 0.8); 
    border-radius: 3px; 
    -webkit-font-smoothing: subpixel-antialiased; 
} 

.tooltipped:before { 
    position: absolute; 
    z-index: 1000001; 
    display: none; 
    width: 0; 
    height: 0; 
    color: rgba(0, 0, 0, 0.8); 
    pointer-events: none; 
    content: ""; 
    border: 5px solid transparent 
} 

.tooltipped:hover:before, 
.tooltipped:hover:after, 
.tooltipped:active:before, 
.tooltipped:active:after, 
.tooltipped:focus:before, 
.tooltipped:focus:after { 
    display: inline-block; 
    text-decoration: none 
} 

.tooltipped-multiline:hover:after, 
.tooltipped-multiline:active:after, 
.tooltipped-multiline:focus:after { 
    display: table-cell 
} 

.tooltipped-s:after, 
.tooltipped-se:after, 
.tooltipped-sw:after { 
    top: 100%; 
    right: 50%; 
    margin-top: 5px 
} 

.tooltipped-s:before, 
.tooltipped-se:before, 
.tooltipped-sw:before { 
    top: auto; 
    right: 50%; 
    bottom: -5px; 
    margin-right: -5px; 
    border-bottom-color: rgba(0, 0, 0, 0.8) 
} 

.tooltipped-se:after { 
    right: auto; 
    left: 50%; 
    margin-left: -15px 
} 

.tooltipped-sw:after { 
    margin-right: -15px 
} 

.tooltipped-n:after, 
.tooltipped-ne:after, 
.tooltipped-nw:after { 
    right: 50%; 
    bottom: 100%; 
    margin-bottom: 5px 
} 

.tooltipped-n:before, 
.tooltipped-ne:before, 
.tooltipped-nw:before { 
    top: -5px; 
    right: 50%; 
    bottom: auto; 
    margin-right: -5px; 
    border-top-color: rgba(0, 0, 0, 0.8) 
} 

.tooltipped-ne:after { 
    right: auto; 
    left: 50%; 
    margin-left: -15px 
} 

.tooltipped-nw:after { 
    margin-right: -15px 
} 

.tooltipped-s:after, 
.tooltipped-n:after { 
    -webkit-transform: translateX(50%); 
    -ms-transform: translateX(50%); 
    transform: translateX(50%) 
} 

.tooltipped-w:after { 
    right: 100%; 
    bottom: 50%; 
    margin-right: 5px; 
    -webkit-transform: translateY(50%); 
    -ms-transform: translateY(50%); 
    transform: translateY(50%) 
} 

.tooltipped-w:before { 
    top: 50%; 
    bottom: 50%; 
    left: -5px; 
    margin-top: -5px; 
    border-left-color: rgba(0, 0, 0, 0.8) 
} 

.tooltipped-e:after { 
    bottom: 50%; 
    left: 100%; 
    margin-left: 5px; 
    -webkit-transform: translateY(50%); 
    -ms-transform: translateY(50%); 
    transform: translateY(50%) 
} 

.tooltipped-e:before { 
    top: 50%; 
    right: -5px; 
    bottom: 50%; 
    margin-top: -5px; 
    border-right-color: rgba(0, 0, 0, 0.8) 
} 

.tooltipped-multiline:after { 
    width: -webkit-max-content; 
    width: -moz-max-content; 
    width: max-content; 
    max-width: 250px; 
    word-break: break-word; 
    word-wrap: normal; 
    white-space: pre-line; 
    border-collapse: separate 
} 

.tooltipped-multiline.tooltipped-s:after, 
.tooltipped-multiline.tooltipped-n:after { 
    right: auto; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    transform: translateX(-50%) 
} 

.tooltipped-multiline.tooltipped-w:after, 
.tooltipped-multiline.tooltipped-e:after { 
    right: 100% 
} 

@media screen and (min-width: 0\0) { 
    .tooltipped-multiline:after { 
     width: 250px 
    } 
} 

.tooltipped-sticky:before, 
.tooltipped-sticky:after { 
    display: inline-block 
} 

.tooltipped-sticky.tooltipped-multiline:after { 
    display: table-cell 
} 

.fullscreen-overlay-enabled.dark-theme .tooltipped:after { 
    color: #000; 
    background: rgba(255, 255, 255, 0.8) 
} 

.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before, 
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before, 
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before { 
    border-bottom-color: rgba(255, 255, 255, 0.8) 
} 

.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before, 
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before, 
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before { 
    border-top-color: rgba(255, 255, 255, 0.8) 
} 

.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before { 
    border-right-color: rgba(255, 255, 255, 0.8) 
} 

.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before { 
    border-left-color: rgba(255, 255, 255, 0.8) 
}

编辑：越来越近：

这是相关代码：

<div id="example-text" class="example"> 
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn&#39;t mean you should — clipboard.js">Copy to clipboard</button> 
</div> 

    <pre class="snippet"> 
<button class="btn" data-clipboard-snippet=""> 
<img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard"> 
</button> 
<code class="html hljs xml"> 
<span class="hljs-comment">&lt;!-- Trigger --&gt;</span> 
    <span class="hljs-tag">&lt;<span class="hljs-title">button</span> 
<span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span> 
<span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>&gt;</span> 
     Copy to clipboard 
    <span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span> 
</code> 
</pre>

Tried and still without success - 神奇究竟是TRIGER。

我如何获得工具提示我点击（如在剪贴板页面）？

这里有一个live one：

来源

2017-07-19 StackBuck

因为在您添加标记的jQuery你的问题：也许你找https://api.jquery.com/mouseleave/ – reporter

我删除它。我不关心jQuery。 – StackBuck

我也必须纠正我。其实我的意思是'mouseup'事件。不幸的是，我只发现了这个事件的jQuery例子。也许'element.onmouseup = doSomething;'是jquery的纯javascript插件。 – reporter

明白了。它隐藏在demoes.js文件中。
特别是该行：

<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn&#39;t mean you should — clipboard.js">Copy to clipboard</button>

这是纠正代码：

<script src="https://clipboardjs.com/assets/scripts/demos.js"></script> 
<div id="example-text" class="example"> 
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn&#39;t mean you should — clipboard.js">Copy to clipboard</button> 
</div> 

    <script> 
    var clipboard = new Clipboard('.btn'); 

    clipboard.on('success', function(e) { 
     console.log(e); 
    }); 

    clipboard.on('error', function(e) { 
     console.log(e); 
    }); 
    </script>

现在正在工作。这里的结果：HERE

来源

2017-07-19 17:15:04 StackBuck

在点击鼠标后显示工具提示，当鼠标悬停时

回答

相关问题