How to add ext:qtip to image?

[dbassett74]

The following isn't working for me. What am I doing wrong?

<img alt="" src="images/add.png" style="position: absolute; left: 80px; top: 4px; cursor: pointer; ext:qtip="Click to view/edit agency data" />

[geoffrey.mcgill]

Your html is not well formed. You're missing the closing double-quote (") after your style attribute.*

Example

cursor: pointer;" <-- missing the closing double-quote

[dbassett74]

Woops, but still doesn't work:

<img id="imgAddNotification" runat="server" alt="" src="images/add.png" style="position: absolute; left: 80px; top: 3px; cursor: pointer;" ext:qtip="Click to add notification" />

I have this directly in markup, not calling JavaScript to add it. Can it not be added this way? I have seen another example where you must call some JavaScript render function, but I find it much cleaner to have it inline if possible.

[geoffrey.mcgill]

It appears the .NET runtime is stripping the ext:qtip parameter when you set the runat="server" attribute. I'm not sure why, but it does. This is not related to anything with the coolite toolkit and appears to be the default functionality of the .NET runtime.*

The attribute needs to present in the html source for the qtip to be rendered.*


If you remove the runat="server" attribute from the <img> tag, then everything works as expected.*

[dbassett74]

Perfect! In this case, I don't need runat so it works fine. Thanks.