[英]JQUERY: How to tag selected text using textbox as tooltip
I'm building a website where i have pages with lot of text. 我正在建立一个网站,其中有很多文字的页面。
I need the ability to select text and than tag it with name and add it to list at the top of the page. 我需要能够选择文本,然后使用名称标记文本并将其添加到页面顶部的列表中。 the text can be very long so i'll have to use some tooltip for that.
文字可能很长,因此我必须使用一些工具提示。
i want something like that picture i illustrated with photoshop : 我想要类似用photoshop演示的图片 :
this jsfiddle is the closest i could get to what i want but its still not eneugh . 这个jsfiddle是我能得到的最接近我想要的东西,但它仍然不足 。
i saw some tooltips that may be helpful: 我看到了一些可能有用的工具提示:
Toltipster Toltipster
Supernote Supernote
thanks
I don't know if this is what you were asking for but here is a solution for showing the tooltip next to the selected (or highlighted) text. 我不知道这是否是您要的,但这是一种在所选(或突出显示)文本旁边显示工具提示的解决方案。
using window.getSelection()
to get the selected text 使用
window.getSelection()
获取所选文本
var x = e.pageX; var y = e.pageY;
to get coordinates at mouseup event ( pageX
, pageY
take care of scrolling) 在mouseup事件中获取坐标(
pageX
, pageY
负责滚动)
$("#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.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>
I first get the coordinates at mouseup
我首先在
mouseup
获得坐标
var x = e.clientX;
var y = e.clientY;
and then use them to position the tooltip with a function placeTooltip
然后使用它们使用功能
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';
}
Here's the complete mouseup function 这是完整的mouseup功能
$('#longtext').mouseup(function (e) {
var x = e.clientX;
var y = e.clientY;
placeTooltip(x, y);
$("#tooltip").show();
document.getElementById('tbNames').value = getSelectionText();
})
Updated Jsfiddle: http://jsfiddle.net/user2314737/BQSJ3/286/ 更新的Jsfiddle: http : //jsfiddle.net/user2314737/BQSJ3/286/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.