Question

我有一张桌子。对于某些元素，我想产生一种效果，当我们鼠标悬停（或点击）一个元素时，它旁边会出现一个文本，文本可能有几行，有些行可以点击。

例如，在以下代码生成的表格中，当我们鼠标悬停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 ......

（* this thread没有解释如何在出现的文本中插入链接*）

Answer 1

您可以尝试使用链接

的工具提示

参见JQuery示例

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

您可以尝试使用链接

之类的简单工具提示

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

Answer 2

这是一个将mshameer's answer的某些方面与您提供的bin结合起来的解决方案。

Solution 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使用表，这可能不是问题。

我还尝试通过在鼠标上保持半秒超时来控制时间，这样用户可以在那段时间内回溯元素以继续查看它而不是立即丢失视图。

使用多个可单击的行显示文本

2 个答案:

注意事项