使用TableFilter，如何更改下拉列表中的文本？

Question

我使用tablefilter.js在一个超文本标记语言表格的顶部生成下拉列表。在两个表格行中，我有一个跨度，作为悬停时的工具提示，所以它不会显示，除非鼠标悬停在它上面。

<td>
  <a class="tooltip" href="#" id="color">Red
    <span>
      <strong>Favorite Color</strong><br />
        If this is not your favorite color,
        please make changes on this page.
    </span>
  </a>
</td>

问题是列顶部的下拉文本包含了跨度，所以当用户单击下拉菜单时，它会显示"Red Favorite Color If this is not ...“。而不是简单的“红色”

有没有办法防止tablefilter插件抓取初始锚点“Red”之后的任何内容？

以下是工具提示的CSS：

a.tooltip {
  outline:none;
  text-decoration:none;
}

a.tooltip strong {
  line-height:30px;
}

a.tooltip span {
  display:none;
  line-height:16px;
  margin-left:28px;
  margin-top:-30px;
  padding:14px 20px;
  width:240px;
  z-index:10;
}

a.tooltip:hover span {
  border:1px solid #DCA;
  background:#fffAF0;
  color:#111;
  display:block;
  position:absolute;
}

.callout {
  border:0;
  left:-12px;
  position:absolute;
  top:30px;
  z-index:20;
}

a.tooltip span
{
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;
}

Answer 1

我通常使用列表作为下拉列表。看起来单词red在一个元素之外。也许把“red”这个词放在里面

标签？或逗号悬停在css中的a.tooltip:hover之后，span {