使文本显示为几行可点击的线条

Make appear a text with several clickable lines

本文关键字：几行 显示 文本      更新时间：2023-09-26

我有一个表。对于某些元素，我想制作这样一种效果:当我们将鼠标悬停在(或单击)一个元素上时，它旁边会出现一个文本，该文本可以有几行，有些行可以点击。

例如，在下面代码生成的表格中，当鼠标移到30上时，会出现一个文本

<table style="width:100%">
  <tr>
    <th>First Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td><span title="monday: 10; tuesday: 10; wednesday: 10">30</span></td>
  </tr>
</table>

JSBin

然而，我希望出现的文本是monday: 10, tuesday: 10和wednesday: 10逐行。我们可以点击例如monday: 10来打开一个页面或移动到页面的另一部分。title不允许。

有人知道如何实现这一点吗?我们可以使用JavaScript, CSS…

(*这个线程没有解释如何在出现的文本中插入链接*)

你可以尝试使用链接的工具提示

参见JQuery示例

https://codepen.io/jamilhijjawi/pen/lIwbK

你可以尝试简单的工具提示，像下面的链接

http://www.w3schools.com/css/css_tooltip.asp

这里有一个解决方案，它将mshameer的答案的某些方面与您提供的bin相结合。

解决方案JSBin

这个脚本有两种创建工具提示的方法。第一个元素可以在HTML属性中声明，使用|字符作为行分隔符，第二个元素允许作为JQuery对象直接传递元素及其工具提示。这意味着，如果您不需要任何特定的单击样式，您不必放弃html声明的梦想。

HTML: 

<h1 data-over="You have hovered|Over this">Here is a title</h1> 
<p id="test">TEST</p>

通过data-over属性进行搜索的JavaScript:

// Search for text if it's simple in the HTML
var $dataElements = $("[data-over]");
$dataElements.each(function (index, el) {
  var $el = $(el);
  var text = $el.attr("data-over");
  if (text) {
    // Split by "|"
    text = text.split("|");
    createDataOver($el, text);
  }
});

JavaScript手动添加工具提示:

// Or provide it yourself.
var $testData = $(document.createElement("span"));
$testData.text("Click me.").click(function () {
  alert("Clicked");
});
createDataOver($("#test"), $testData);

createDataOver做真正的工作:

function createDataOver($el, data) {
  var $holder = $(document.createElement("div"));
  $holder.addClass("over hidden");
  // Check if we provided JQuery or a string array
  if (data instanceof jQuery) {
    // Manually make it relatively positioned
    $el.css("position", "relative");
    data.addClass("over-line");
    $holder.append(data);
  }
  else {
    data.forEach(function (line) {
      var $line = $(document.createElement("span"));
      $line.text(line);
      $line.addClass("over-line");
      $holder.append($line);
    });
  }
  // append with the hidden class to start
  $el.append($holder);
  // Create a closure with a timeout variable
  // So it doesn't disappear immediately if
  // we don't want it to!
  (function closure() {
    var timeoutCancel = -1;
    $el.mouseenter(function () {
      if (timeoutCancel !== -1) {
        clearTimeout(timeoutCancel);
        timeoutCancel = -1;
      }
      $holder.removeClass("hidden");
    });
    $el.mouseleave(function () {
      timeoutCancel = setTimeout(function () {
        if (timeoutCancel !== -1)
          $holder.addClass("hidden");
      }, 500);
    });
  }());
}

警告

此解决方案要求工具提示父级为position: relative。它也不会具有与title属性相同的条目边界—display: block h3元素将在其整个行中响应mouseenter。由于您提供的JSBin使用表，因此这可能不是问题。

我还尝试通过在mouseleave上设置半秒超时来控制时间，这样用户就可以在这段时间内将鼠标移回到元素上继续查看它，而不是立即失去它的视图。

相关文章：