我怎么能让一个弹出，一旦用户突出一个词

How could I make a popup once user highlights a word?

本文关键字：一个 用户 怎么能      更新时间：2023-09-26

我想做一个与用户突出显示的单词(或单词)相关的弹出窗口。就像用户高亮this，然后一个弹出框跳出来，说:"了解更多关于'this'的信息。查看与这个(或这些)词相关的文章。"

我怎么能这么做?

HTML

<p>Lorem ipsum dolor sit amet, <a class="popuplink" href="#">consectetur </a>adipiscing elit. Maecenas sed lectus nec risus volutpat gravida. Duis dapibus felis lobortis et lobortis nulla ornare. Suspendisse eu mi tempus magna volutpat elementum vel vitae enim. Maecenas feugiat feugiat tincidunt. Suspendisse eu rhoncus dolor. Cras porta, arcu sagittis porta, ligula odio tristique lorem, id sagittis risus velit nec elit. Sagittis lacus scelerisque mauris rhoncus ut porttitor quam cursus. Praesent nec risus non nunc imperdiet a augue. Etiam ut elit eu metus placerat semper. Nam volutpat massa sed lorem vestibulum at vehicula dui fermentum. Etiam condimentum pretium tincidunt. Nullam nec placerat ligula.</p>
<div id="tooltip"></div>
Jquery 

var $tooltip = $('#tooltip'), // reusable jQuery obj
    offset = {x: 20, y: 20}; // tooltip offset from the cursor
$('a').mouseover(function() { // over
    $tooltip.show()
}).mousemove(function(e) { // move
    // set the positioning with offset
    $tooltip.css({left: e.pageX + offset.x, top: e.pageY + offset.y})
    // set the tooltip HTML contents
    $tooltip.html('Learn more about this...');
}).mouseout(function() { // out
    $tooltip.hide();
});
CSS 

.popuplink{color: #0066cc; background: #CACAC6;}
#tooltip{position: absolute; padding: 10px; border: 1px solid #ccc; background: #fff}
示例

您可以使用捕获亮点

相关文章：