获得两个工具提示气泡，但只想要一个

Question

I have an image (orange circle) that shows a tooltip with a message (covered by red lines in the image):

However, I only want the black tooltip bubble to appear and not the generic white bubble at the bottom.

I have the following tooltip in my JavaScript at pageLoad:

$('#<%=alarmClipsDurationWarning.ClientID%>').tooltip({ 'placement': 'center right', 'title': $('#<%=alarmClipsDurationWarning.ClientID%>').attr('title'), 'delay': 0 });

HTML:

<i id="alarmClipsDurationWarning" runat="server" class="icon-exclamation-sign icon-large" style="cursor:pointer;color:orange"></i>

The title will change when a drop down item is changed on the C# side:

alarmClipsDurationWarning.Attributes.Add("title", GetAlarmClipsDurationWarningToolTip());

GetAlarmClipsDurationWarningToolTip() just returns a string based on the drop down change. I tried doing a remove then add:

alarmClipsDurationWarning.Attributes.Remove("title");
alarmClipsDurationWarning.Attributes.Add("title", GetAlarmClipsDurationWarningToolTip());

And I tried this too:

alarmClipsDurationWarning.Attributes["title"] = GetAlarmClipsDurationWarningToolTip();

But none of them give me a single bubble.

Answer 1

The white bubble is coming from the title attribute. Since you can specify exactly what content you want:

$('#<%=alarmClipsDurationWarning.ClientID%>').attr('title')

Why not use a different attribute?

alarmClipsDurationWarning.Attributes.Add("data-tooltip-content", ...

---

$('#<%=alarmClipsDurationWarning.ClientID%>').attr('data-tooltip-content')

Answer 2

Don't use the title attribute for your tooptip. There appears to be nothing about the tooptip extension that requires it. Change it to, say, data-title where it is set in C# and where it is read by the Tooltip extension.