Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Qtip on image is not showing in safari
19th November, 16:33
Post: #1
Qtip on image is not showing in safari
Hi,
I am new to jQuery and qTip too. I have the following code [pasted below] that shows a qtip on image and label when we mouse over it. qTip on image and Label works fine in IE 8.0, but qTip works fine only on label in Firefox (3.0.15)and Safari (4.0) but not on image. Am I missing something here (code or references)?

Can somebody help me? I appreciate the help and Thanks in advance.


JS Code
<script type="text/javascript">
$(document).ready(function() {          
 
          //Label on Mouseover
          $("span[id*='lblStar']").qtip({
             content: { text: 'My tooltip content' },
             position: { corner: { tooltip: 'bottomMiddle', target: 'topMiddle'} },
             show: { effect: { type: 'fade', length: 100 }, when: { event: 'mouseover' }, ready: false },
             hide: { when: { event: 'mouseout'} },
             style: { padding: 2, background: 'white', color: '#3D4D7A', textAlign: 'center', border: { width: 2, radius: 5, color: '#3D4D7A' }, tip: 'bottomMiddle', name: 'dark' }
          });
 
          //Image on Mouseover
          $("image[id*='imgStar']").qtip({
             content: { text: this.title },
             position: { corner: { tooltip: 'bottomMiddle', target: 'topMiddle'} },
             show: { effect: { type: 'fade', length: 100 }, when: { event: 'mouseover' }, ready: false },
             hide: { when: { event: 'mouseout'} },
             style: { padding: 2, background: 'white', color: '#3D4D7A', textAlign: 'center', border: { width: 2, radius: 5, color: '#3D4D7A' }, tip: 'bottomMiddle', name: 'dark' }
          });
       });
 </script>
 
and HTML is 
 
<table border="1" width="50%">
  <tr>
     <td  valign="middle" align="center">
   This is Label1 <asp:Label ID="lblStar2" runat="server" Text="*" ></asp:Label>
      </td>         
      <td  valign="middle" align="center">
   This is Label2 <asp:Label ID="lblStar3" runat="server" Text="*"></asp:Label>
      </td>
      <td  valign="middle" align="center">
             This is Image <asp:Image ID="imgStar" runat="server"  AlternateText="This is alternate text" 
               ImageUrl="~/images/btnQuestionMark.gif"
               ToolTip="this is tool tip text"
               Style="width: 16px; height: 16px" />
     </td>
  </tr>
</table>
Find all posts by this user
Quote this message in a reply
23rd November, 01:26
Post: #2
Qtip on image is not showing in safari
naughtylak, I'm not proficient in ASP enough to say but it looks like non-IE browsers aren't understanding what the image element is, and quite rightly from what I understand as it's not an actual valid HTML element. IMG however is, so maybe thats where the problem lyes?

Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [Solved] styling tooltips with an image map nataroo37 8 4,438 28th January 11:04
Last Post: MiH



User(s) browsing this thread: 1 Guest(s)