Using TableFilter, how do you alter the text in the dropdown?

Question

I'm using tablefilter.js to generate dropdowns at the top of an HTML table. In a couple of the table rows, I have a span that serves as a tooltip on hover, so it doesn't show unless a mouse is hovering over it.

<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>

The problem is that the dropdown text at the top of the column is including the span, so when a user clicks on the dropdown, it says "Red Favorite Color If this is not ..." instead of simply "Red."

Is there any way to prevent the tablefilter plugin from grabbing anything after the initial anchor that says "Red?"

Here's the CSS for the tooltip:

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

I typically use lists for dropdowns. It seems that the word red is outside of an element. Maybe place the word 'red' inside

tags ? or a comma after hover in your css after a.tooltip:hover, span {