選択したテキストの後ろに空のスパンを挿入する

Question

私はユーザーがテキストを選択できる辞書機能に取り組んでいます。選択したテキストを1秒以上ホバーすると、単語やフレーズの定義が表示されます。

https://gfycat.com/IcyWebbedCapeghostfrog

私は現在の実装では、非常に初歩的であり、マウスは、選択の範囲内であればmousemoveイベントとチェックを使用します。 mouseenterとmouseleaveを使用するだけで無限に効率が良いと考えましたが、選択したテキストは実際の要素ではありません。私がこの問題について調べた投稿のすべては、選択したテキストをスパンで囲まれたテキストに置き換えることで解決されますが、テキストを前後に置き換える必要があります選択。私が選択しているテキストの背景色や色を変更したくないので、選択したテキストの後ろに空のスパンを作成するほうがはるかに良いと思いました。この方法で、いつでもどこでも簡単に表示/非表示/削除できます。

これをどのように使い始めるべきかわかりません。検索では何も役に立たないものはありません。どんな助けでも大歓迎です、ありがとう！

Answer 1

このようなことができます。

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

とCSSで、

最初

.hide-class { 
    display: none; 
} 

、このdivが隠されています。このdivは、show（）メソッドとhide（）メソッドで操作できます。例えば

、

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

あなたを助け願っています！あなたは、テキストを選択する上で、あなたのpurpose.bindツールチップのために** **ツールチップを検索する必要が:)

Answer 2

$("#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>