Show tooltip when text is selected

Question

Once a text is selected, I want to show a tooltip at the bottom that says "Copied!" and also the tooltip must be at the center of the selection. Although I'm not sure how to implement the tooltip to show up after it is selected. This is what I've done so far...

HTML

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

CSS (for the tooltip)

[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
}

Any help would appreciated. Also vanilla javascript is preferred.

Conventional UI/UX designs uses a button for users to copy text, maybe you could consider that instead? — Chun Yin, May 15 '18 at 03:41
Right now when you click text then it shows tooltip. Try doing on hover — MontyGoldy, May 15 '18 at 03:47
@MontyGoldy Yeah I purposely did that. But that doesn't solve the issue where it is selected. — ronsic, May 15 '18 at 03:50
[https://stackoverflow.com/a/18302723/6191987](https://stackoverflow.com/a/18302723/6191987) — vishnu, May 15 '18 at 05:01

score 2 · Answer 1 · answered May 15 '18 at 05:17

Here you go with a simple solution

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>

Hope this will help you.

score 1 · Answer 2 · answered May 15 '18 at 08:21

Something like this should work.

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>

Show tooltip when text is selected

2 Answers2