Question

我需要显示所选/突出显示文本的工具提示，以便允许用户将其设置为斜体/粗体/正常。我可能会在相关类的样式中包含该单词，但是我需要弄清楚如何显示这样的工具提示并处理所选单词以便我可以对其执行操作。我试图找到一个这样做的图书馆，但到目前为止还没有运气。

下面的图片展示了我之后的所作内容：

用户选择单词Works并显示工具提示。

Answer 1

jQuery .select()事件处理程序应该是您正在寻找的。文档页面上有一个例子，你可以重新调整用途。

然而，定位... tooltip元素可能会很棘手。在让select事件发挥作用后，可能值得第二个问题。

Answer 2

您可以将活动绑定到正文mouseup处理程序，并检查是否有任何文字被选中。

从这里您可以检查选择是否有任何文本，如果有，请根据需要显示工具提示。

这是一个将选定文本包装在一个粗体和放大文本的范围内的示例：http://jsbin.com/yezake/edit?js,output

const mouseUpHandler = function () {
  const sel = document.getSelection();

  if(!sel.toString()) {
    $('.foo').contents().unwrap();
    sel.removeAllRanges();
    return;
  }

  const newNode = document.createElement('span');
  newNode.className = 'foo';


  const range = sel.getRangeAt(0);
  range.surroundContents(newNode);

  sel.removeAllRanges();
  sel.addRange(range);

};

$('body').on('mouseup', mouseUpHandler);

您可以稍微多一些时间将工具提示标记添加到此处，并在进行选择时显示。这可能是一个非常天真的实现，但是如果你想自己动手，它可以让你开始。

Answer 3

试试这个，需要 JQuery

https://jsfiddle.net/Ripper1992/L0suavjd/

脚本

$(document).ready(function(){
    $('span').mouseenter(function(){
        var span = $(this);
        $('.tooltip').fadeIn();
    })
    $('.tooltip').mouseleave(function(){
        var span = $(this);
        $('.tooltip').fadeOut();
    })
    $('a').click(function(){
        var classe = $(this).attr('class');
        var spanClass = $('span').removeClass();
        $('span').addClass(classe);
  });
})

HTML

<div>The Piano <span class=''>Works</span> is like a live</div>

<div class="tooltip">
    <a href="#" class="bold">Bold</a>
    <a href="#" class="italic">Italic</a>
    <a href="#" class="normal">Normal</a>
</div>

CSS

.tooltip{
    display: none;
    border: solid 1px #CCC;
    width: 130px;
    text-align: center;
    position: absolute;
}
.bold{
    font-weight: bold;
    font-style: normal;
 }
.italic{
    font-weight: normal;
    font-style: italic;
 }
 .normal{
    font-weight: normal;
    font-style: normal;
 }

在突出显示/选择文字中的文字时执行操作

3 个答案: