Question

我正在建立一个网站，其中包含大量文字的网页我需要能够选择文本而不是用名称标记它，并将其添加到页面顶部的列表中。文本可能很长，所以我必须使用一些工具提示。
我想要的东西就像我用photoshop说明的那张照片：

这jsfiddle是我能得到的最接近的东西，但仍然不是。

我看到了一些可能有用的工具提示：
Toltipster
Supernote

thanks

Answer 1

我不知道这是否是您所要求的，但这里是一个解决方案，用于显示所选（或突出显示）文本旁边的工具提示。

2017年更新：

使用window.getSelection()获取所选文字
var x = e.pageX; var y = e.pageY;获取mouseup事件的坐标（pageX，pageY负责滚动）

JsFiddle

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>LIST</h3>

<ul id="names">

</ul>

<div id="tooltip">Selected text:
  <input id='selTxt' type="text"></input>
  <button type="button" id='addBtn'>Add</button>
</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>

＆＃13;

我首先得到mouseup

处的坐标

    var x = e.clientX;
    var y = e.clientY;

然后使用它们使用函数placeTooltip

定位工具提示

function placeTooltip(x_pos, y_pos) {
    var d = document.getElementById('tooltip');
    d.style.position = "absolute";
    d.style.left = x_pos + 'px';
    d.style.top = y_pos + 'px';
}

这里是完整的鼠标功能

$('#longtext').mouseup(function (e) {
        var x = e.clientX;
        var y = e.clientY;
        placeTooltip(x, y);
        $("#tooltip").show();
        document.getElementById('tbNames').value = getSelectionText();
    })

更新了Jsfiddle：http://jsfiddle.net/user2314737/BQSJ3/286/

JQUERY：如何使用文本框标记所选文本作为工具提示

1 个答案:

2017年更新：