選擇文本時顯示工具提示

Question

選擇文本后，我想在底部顯示一個工具提示，上面寫着“已復制！” 並且工具提示必須位於選擇的中心。 雖然我不確定如何實現工具提示以在選擇后顯示。 這是我到目前為止所做的......

HTML

<p>
   <span class="selectable" tooltip="Copied!" tooltip-position='bottom'>
    Some lines of code
   <span>
</p>

CSS（工具提示）

[tooltip]{
  position:relative;
  display:inline-block;
}
[tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.9) transparent transparent;
    z-index: 99;
    opacity:0;
}
[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.9);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;
}
[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}

[tooltip]:active::after,[tooltip]:active::before {
   opacity:1
}

任何幫助將不勝感激。 也首選香草 javascript。

Answer 1

像這樣的事情應該有效。

 var timeout; document.querySelector(".selectable").addEventListener("mouseup", function(e) { var selection = document.getSelection(); if (!selection.toString().trim().length) return; clearTimeout(timeout); document.execCommand('copy'); var rect = selection.getRangeAt(0).getBoundingClientRect(); $(this).tooltip("show"); var tooltipLeft = Math.max(rect.left - ($('.tooltip').width() - rect.width), 0); $('.tooltip').css({ left: tooltipLeft }); var selectable = this; timeout = setTimeout(function() { $(selectable).tooltip("hide"); }, 1000); }); $('.selectable').tooltip({ trigger: 'manual', placement: 'bottom' });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <p> <span class="selectable" title="Copied!">Some lines of code</span> </p>

Answer 2

給你一個簡單的解決方案

 function getTooltip(e) { e.stopPropagation(); var tar = e.target.getBoundingClientRect(); $('.tooltip').css({ top: tar.bottom, left: tar.y }).show(); } $(document).on("click", function(e) { e.stopPropagation(); $('.tooltip').hide(); });

 .tooltip { position: fixed; padding: 5px; border: 1px solid #474747; display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <span class="selectable" onClick="getTooltip(event)"> Some lines of code <span> </p> <div class="tooltip"> Copied!!! </div>

希望這會幫助你。