I basically want to display different information in the tooltip for each row in the repeater. All of the exmples show fixed elements in the page that are referenced by the ShowToolTip javascript. can anyione help ?
Hi Thanks for your help, im still having trouble though. The tooltip doesnt show. My scenario is slightly different from your example, heres part of the repeater contents (in ItemTemplate)
I finally managed to figure out wht the problem is, it wont work in firefox 4 !!
The thing works perfectly in IE 8, but doesnt work at all in firefox 4. Anyone have a solution ? This is for an internal web app and the company obnly use firefox, so swithcing to ie is not an option. Can anyone help ? Ive been stuck on this all day
and really need to get it sorted.
misuk11
Participant
1608 Points
1280 Posts
JQuery tools - tooltip
Apr 06, 2011 09:50 AM|LINK
Im trying to incorporate the jquery tools tooltip into a repeater control and im having some difficulties, has anyone else managed to do this ?
http://flowplayer.org/tools/index.html
I basically want to display different information in the tooltip for each row in the repeater. All of the exmples show fixed elements in the page that are referenced by the ShowToolTip javascript. can anyione help ?
asteranup
All-Star
30184 Points
4906 Posts
Re: JQuery tools - tooltip
Apr 06, 2011 10:15 AM|LINK
Hi,
This code is working for me-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".container[title]").tooltip(); }); </script> <style> .tooltip { display: none; background: transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png); font-size: 12px; height: 70px; width: 160px; padding: 25px; color: #fff; } .container { border:solid 1px red; background-color:gray; margin:3px 3px 3px 3px; } </style> </head> <body> <form id="form1" runat="server"> <asp:Repeater ID="DataList1" runat="server"> <ItemTemplate> <div class="container" title='<%#Eval("album_name")%>' > <img src='<%#Eval("photo_file_name")%>' /> </div> </ItemTemplate> </asp:Repeater> </form> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
asteranup
All-Star
30184 Points
4906 Posts
Re: JQuery tools - tooltip
Apr 06, 2011 10:17 AM|LINK
You can also use-
http://forums.asp.net/p/1663336/4342946.aspx/1?Re+Custom+Css+on+Link+button+tool+tip
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
raghav_khung...
All-Star
32835 Points
5563 Posts
MVP
Re: JQuery tools - tooltip
Apr 06, 2011 10:27 AM|LINK
You can take the idea from here http://codeasp.net/blogs/raghav_khunger/microsoft-net/1005/jquery-how-to-make-a-simple-tool-tip-plugin
misuk11
Participant
1608 Points
1280 Posts
Re: JQuery tools - tooltip
Apr 06, 2011 11:03 AM|LINK
Hi Thanks for your help, im still having trouble though. The tooltip doesnt show. My scenario is slightly different from your example, heres part of the repeater contents (in ItemTemplate)
<td style="width: 25px"> <%--<asp:LinkButton ID="lbMinistry" runat="server" Text='<%#Eval("SupplierName")%>'></asp:LinkButton>--%> <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/coins-icon.gif" ></asp:HyperLink> <div id="tooltip" style="display:none"> <div > <%#Eval("SupplierName")%><br /> <b><%#Eval("Term")%></b><br /> <b><%#Eval("SupplierTariffName")%></b> </div> </div> </td>this is the javascript
<script type="text/javascript"> $(document).ready(function() { $("a[id*=lbMinistry]").tooltip({ track: true, delay: 0, showURL: false, fade: 250, bodyHandler: function() { return $($(this).next().html()); }, showURL: false }); }); function showToolTip() { //alert("hello"); $("a[id*=HyperLink1]").tooltip({ position: "center right", opacity: 0.7, tip: "#demotip", effect: "fade" }); } </script>I want the tooltip to display on the mouseover event, so in my codebehind I have this in the ItemDataBound event of the repeater
protected void RepeaterSiteProduct_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { HyperLink hlToolTip = e.Item.FindControl("HyperLink1") as HyperLink; hlToolTip.Attributes.Add("onmouseover", "showToolTip();"); } }I know the ShowToolTip function is being called because i placed an alert in it and that appeared, but its just not finding the tooltip. An ideas ?
misuk11
Participant
1608 Points
1280 Posts
Re: JQuery tools - tooltip
Apr 06, 2011 05:38 PM|LINK
I finally managed to figure out wht the problem is, it wont work in firefox 4 !!
The thing works perfectly in IE 8, but doesnt work at all in firefox 4. Anyone have a solution ? This is for an internal web app and the company obnly use firefox, so swithcing to ie is not an option. Can anyone help ? Ive been stuck on this all day and really need to get it sorted.
asteranup
All-Star
30184 Points
4906 Posts
Re: JQuery tools - tooltip
Apr 07, 2011 06:33 AM|LINK
Hi,
Following is working fine in firefox ie and safari-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script> <link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $("a[id*=HyperLink1]").tooltip({ track: true, delay: 0, showURL: false, fade: 250, bodyHandler: function() { return $($(this).next().html()); }, showURL: false }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:Repeater ID="dlMinistry" runat="server" > <ItemTemplate> <table> <tr> <td style="width: 25px"> <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="http://www.netbsd.org/images/support-icon-orange.png"></asp:HyperLink> <div id="tooltip" style="display: none"> <div> <%#Eval("SupplierName")%><br /> <b> <%#Eval("Term")%></b><br /> <b> <%#Eval("SupplierTariffName")%></b> </div> </div> </td> </tr> </table> </ItemTemplate> </asp:Repeater> </form> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog