Inserting an empty span behind selected text

Question

I'm working on a dictionary feature where users can select text and after hovering over the selection for a second or so, it will show the definition of the word or phrase.

https://gfycat.com/IcyWebbedCapeghostfrog

The current implementation that I have is extremely rudimentary and uses the mousemove event and checks if the mouse is inside of the range of the selection. I figured it would be infinitely more efficient if I were to just use mouseenter and mouseleave, but the selected text isn't an actual element. All of the posts that I've looked up about this issue are solved by replacing the selected text with text that is wrapped in a span, but that seems like it would get really bothersome having to replace text back and forth every time I make a selection. Since I do not want to change the background-color or color of the text that I am selecting, I figured it would be much better to just create an empty span behind the selected text. This way, I can just easily show/hide/remove it whenever and wherever I want.

I have no idea whatsoever how to get started with this though, and searches aren't really turning up anything useful. Any help would be greatly appreciated, thank you so much!

You have to search for **tool-tips** for your purpose.bind the tool-tips on selecting the text. — Satyanarayana.Ruppa, Oct 19 '17 at 07:00
Possible duplicate of [Detect hover on selected text](https://stackoverflow.com/questions/30599608/detect-hover-on-selected-text) — A. Iglesias, Oct 19 '17 at 07:03

score 0 · Answer 1 · answered Oct 19 '17 at 07:00

You can do something like this .

<div class="hide-class"> </div>

And in css,

.hide-class {
    display: none;
}

Initially , this div is hidden. You can manipulate this div by show() and hide() methods.

For example,

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(".hide-class").show();
    });
    $("p").mouseleave(function(){
        $(".hide-class").hide();
    });
});
</script>

Hope that helped you! :)

score 0 · Answer 2 · answered Oct 19 '17 at 07:09

$("#addBtn").click(function() {
  // add <li> to existing <ul>
  // http://stackoverflow.com/questions/1145208/jquery-how-to-add-li-in-an-existing-ul
  $("#names")
    .append($('<li>').append(
      $('#selTxt').val()
    ));
  $("#tooltip").hide();
});

function placeTooltip(x_pos, y_pos) {
  $("#tooltip").css({
    top: y_pos + 'px',
    left: x_pos + 'px',
    position: 'absolute'
  });
}

  
  $('#longtext').mouseup(function(e) {  
   // get selected text
  // http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text
  var selection = window.getSelection().toString();  
  $('#selTxt').val(selection.toString());     
    var x = e.pageX;
    var y = e.pageY;  
    placeTooltip(x, y);
    $("#tooltip").show();    
  });

#tooltip {
  background-color: #EEE;
  display: inline-block;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  border: 1px solid;
  border-color: #3333FF;
  border-radius: 15px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h3>LIST</h3>

<ul id="names">

</ul>

<div id="tooltip">
<span>I am a sample span.change my content!</span>
</div>

<div id='longtext'>Oliver Twist, subtitled The Parish Boy's Progress, is the second novel by English author Charles Dickens, published by Richard Bentley in 1838. The story is about an orphan, Oliver Twist, who endures a miserable existence in a workhouse and then is placed
  with an undertaker. He escapes and travels to London where he meets the Artful Dodger, leader of a gang of juvenile pickpockets. Naïvely unaware of their unlawful activities, Oliver is led to the lair of their elderly criminal trainer Fagin.
  <hr>
  <br>Thomas "Tom" Sawyer is the title character of the Mark Twain novel Adventures of Tom Sawyer (1876). He appears in three other novels by Twain: Adventures of Huckleberry Finn (1884), Tom Sawyer Abroad (1894), and Tom Sawyer, Detective (1896). Sawyer
  also appears in at least three unfinished Twain works, Huck and Tom Among the Indians, Schoolhouse Hill, and Tom Sawyer's Conspiracy. While all three uncompleted works were posthumously published, only Tom Sawyer's Conspiracy has a complete plot, as
  Twain abandoned the other two works after finishing only a few chapters. The fictional character's name may have been derived from a jolly and flamboyant fireman named Tom Sawyer whom Twain was acquainted with in San Francisco, California, while Twain
  was employed as a reporter at the San Francisco Call.Twain used to listen to Sawyer tell stories of his youth, "Sam, he would listen to these pranks of mine with great interest and he'd occasionally take 'em down in his notebook. One day he says to
  me: ‘I am going to put you between the covers of a book some of these days, Tom.’ ‘Go ahead, Sam,’ I said, ‘but don’t disgrace my name.’" Twain himself said the character sprang from three people, later identified as: John B. Briggs (who died in 1907),
  William Bowen (who died in 1893) and Twain; however Twain later changed his story saying Sawyer was fully formed solely from his imagination, but as Robert Graysmith says, "The great appropriator liked to pretend his characters sprang fully grown from
  his fertile mind."</div>

Inserting an empty span behind selected text

2 Answers2