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

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

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