The problem I have is that it cuts the content off once it hits text space in
Provider_Day_Comment
So instead of getting "This is good practice" I just get "This".
I know it's something to do with the white-space CSS3 property, but all values produce the same result.
But, according to this below demo you could know that the “overflow:hidden” maybe hidden the overflowing text. So, you could try to add “overflow: visible” in your “.tooltip:hover:after” to check whether the hidden text would be appear.
I think the .net parser is making a mess of the generated output.
It is missing quotes where the html parser would normally expect them and renders the output as
<span class=tooltip title = this is a comment.>Smith, Bob</span>
where: this is a comment is the binded expression Eval("Provider_Day_Comment")
I will be searching how to properly escape quotes in a databinding expression
It is missing quotes where the html parser would normally expect them and renders the output as
<span class="tooltip" title = this is a comment.>Smith, Bob</span>
where: this is a comment is the binded expression Eval("Provider_Day_Comment")
I will be searching how to properly escape quotes in a databinding expression
I think you’d better first use F12 to check the front HTML code to make sure whether the issue is related to the databinding expression.
If the unexpected CSS output is related to the databinding expression, you’d better use single quotes as below sample code to do it. Or, you could share your code.
Value='<%# Eval("ColumnName") %>'
For the reason, you could learn the following article.
So the parser is hacking the title into a title attribute "Melinda" (which is why I get one word only) and then creates all these other attributes that aren't valid i.e. has="" a="" comment=""
So instead of getting "Melinda has a comment" I get only "Melinda":
I think I might make a strategic retreat (give up) on this for now and hopefully get an answer somewhere down the track.
I can still add a tooltip to the control and get bog standard styling on it when hovered over.
>>I copied your code exactly as is and I am getting the same result on the front end and in F12
>>So instead of getting "Melinda has a comment" I get only "Melinda":
Thank you for your response.
If your issue is still exist, I think you should pay more attention to the value of “Provider_Day_Comment” when you get them from your data source. I guess it’s more related it.
In my test, the value is just a string without blanks and quotation marks. About your result, it’s very strange that where the “for” comes from. I think you’d better have a try to remove all the quotation marks from your “Provider_Day_Comment” values.
Member
109 Points
374 Posts
Styling Tooltip - Text Space Issue
Mar 04, 2016 12:37 AM|Madog|LINK
I found a clever way to style tooltips (see HTML Dog's response to question at http://stackoverflow.com/questions/5041589/how-to-style-the-alt-tooltip-in-html)
The idea is to utilise the CSS3 after pseudo element to inject content after the span when the span is hovered over.
I have applied the technique to an asp linkbutton to display a stylised box containing Provider_Day_Comment when the link button is hovered over.
<asp:LinkButton runat="server" ID="btnNameCommand" CommandName="Edit" Text='<%# "<span title =" + Eval("Provider_Day_Comment") + " class=tooltip" + ">" + Eval("Concatinated_Name") + "</span>"%>'></asp:LinkButton>The CSS is:
.tooltip { border-bottom: 1px dotted #333; } .tooltip:hover:after { content: attr(title); position: absolute; width:400px; white-space:pre-line; background: green; padding: 3px 3px; color: #FFF; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-left: 5px; margin-top: -3px; }The problem I have is that it cuts the content off once it hits text space in Provider_Day_Comment
So instead of getting "This is good practice" I just get "This".
I know it's something to do with the white-space CSS3 property, but all values produce the same result.
Thanks
All-Star
15186 Points
3888 Posts
Re: Styling Tooltip - Text Space Issue
Mar 04, 2016 11:04 AM|raju dasa|LINK
Hi,
I am not able to reproduce your issue:
http://jsbin.com/kojipavajo/edit?html,css,output
Its working fine.
rajudasa.blogspot.com || rajudasa-tech
Star
7980 Points
1586 Posts
Re: Styling Tooltip - Text Space Issue
Mar 04, 2016 12:12 PM|Weibo Zhang|LINK
Hi madog,
I guess there are some other CSS style to hide the text. You’d better use F12 to troubleshoot the issue.
According to the following demo you could know that the “white-space: pre-line;” would not cut out the text.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-line
But, according to this below demo you could know that the “overflow:hidden” maybe hidden the overflowing text. So, you could try to add “overflow: visible” in your “.tooltip:hover:after” to check whether the hidden text would be appear.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow&preval=scroll
Best Regards,
Weibo Zhang
Member
109 Points
374 Posts
Re: Styling Tooltip - Text Space Issue
Mar 07, 2016 12:04 AM|Madog|LINK
Thankyou both for taking the time to answer.
The overflow:visible is not working I'm afraid.
I think the .net parser is making a mess of the generated output.
It is missing quotes where the html parser would normally expect them and renders the output as
<span class=tooltip title = this is a comment.>Smith, Bob</span>
where: this is a comment is the binded expression Eval("Provider_Day_Comment")
I will be searching how to properly escape quotes in a databinding expression
Star
7980 Points
1586 Posts
Re: Styling Tooltip - Text Space Issue
Mar 08, 2016 05:42 AM|Weibo Zhang|LINK
Hi madog,
I think you’d better first use F12 to check the front HTML code to make sure whether the issue is related to the databinding expression.
If the unexpected CSS output is related to the databinding expression, you’d better use single quotes as below sample code to do it. Or, you could share your code.
Value='<%# Eval("ColumnName") %>'For the reason, you could learn the following article.
http://geekswithblogs.net/dotNETvinz/archive/2010/04/15/why-double-quotes-does-not-work-in-inline-databinding-statement.aspx
If you want to let the result has quotes, you could refer to the following thread to implement the binding expression by using “"”.
http://stackoverflow.com/questions/264414/how-to-use-single-quotes-in-eval-format-string
Best Regards,
Weibo Zhang
Member
109 Points
374 Posts
Re: Styling Tooltip - Text Space Issue
Mar 09, 2016 02:47 AM|Madog|LINK
Hi Weibo,
I had already reviewed those articles and couldn't see an application/solution to my issue. The .net compiler complains about using "
I now think it's something the parser/compiler doing.
My code is this:
<asp:LinkButton runat="server" ID="btnNameCommand" CommandName="Edit" Font-Underline="false" Font-Bold="true" ForeColor="Black" Text='<%# "<span class=tooltip " + String.Format("title={0}", Eval("Provider_Day_Comment")) + ">" + Eval("Concatinated_Name") & "</span>"%>'></asp:LinkButton>In F12, the html output for the text property is:
So the parser is hacking the title into a title attribute "Melinda" (which is why I get one word only) and then creates all these other attributes that aren't valid i.e. has="" a="" comment=""
So instead of getting "Melinda has a comment" I get only "Melinda":
Thanks
Star
7980 Points
1586 Posts
Re: Styling Tooltip - Text Space Issue
Mar 09, 2016 06:02 AM|Weibo Zhang|LINK
Hi madog,
I have created a demo based on your code and replace the last “&” with “+” as below and it could work.
<asp:LinkButton runat="server" ID="btnNameCommand" CommandName="Edit" Font-Underline="false" Font-Bold="true" ForeColor="Black" Text='<%# "<span class=tooltip " + String.Format("title={0}", Eval("Provider_Day_Comment")) + ">" + Eval("Concatinated_Name") + "</span>"%>'></asp:LinkButton>Below is the front HTML code.
Best Regards,
Weibo Zhang
Member
109 Points
374 Posts
Re: Styling Tooltip - Text Space Issue
Mar 17, 2016 02:50 AM|Madog|LINK
Heh Weibo,
I copied your code exactly as is and I am getting the same result on the front end and in F12
I think I might make a strategic retreat (give up) on this for now and hopefully get an answer somewhere down the track.
I can still add a tooltip to the control and get bog standard styling on it when hovered over.
Thanks for your help
Star
7980 Points
1586 Posts
Re: Styling Tooltip - Text Space Issue
Mar 18, 2016 01:53 AM|Weibo Zhang|LINK
Hi madog,
>>I copied your code exactly as is and I am getting the same result on the front end and in F12
>>So instead of getting "Melinda has a comment" I get only "Melinda":
Thank you for your response.
If your issue is still exist, I think you should pay more attention to the value of “Provider_Day_Comment” when you get them from your data source. I guess it’s more related it.
In my test, the value is just a string without blanks and quotation marks. About your result, it’s very strange that where the “for” comes from. I think you’d better have a try to remove all the quotation marks from your “Provider_Day_Comment” values.
Best Regards,
Weibo Zhang
Member
109 Points
374 Posts
Re: Styling Tooltip - Text Space Issue
Mar 18, 2016 02:41 AM|Madog|LINK
That's right Weibo, it works for a non breaking string.
The for="" part comes into it because the full comment is "This is a comment for Melinda". The other words also get their own attribute......weird!
I'll press on, thanks for your time.
Star
7980 Points
1586 Posts
Re: Styling Tooltip - Text Space Issue
Mar 18, 2016 06:25 AM|Weibo Zhang|LINK
Hi madog,
I have made a demo that could reproduce your issue. When I modify the bind method as below, it could solve this issue and you could have a try.
<asp:LinkButton runat="server" ID="btnNameCommand" CommandName="Edit" Font-Underline="false" Font-Bold="true" ForeColor="Black" Text='<%# "<span class=tooltip " + String.Format("title={0}", Eval("Comment")).Replace(" "," ") + ">" + Eval("Item") + "</span>"%>'></asp:LinkButton>The behind code
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Item"), new DataColumn("Price"), new DataColumn("Comment") }); dt.Rows.Add("Football", 299, "This is a comment for 'Football'"); dt.Rows.Add("Shirt", 545, "It's 15."); dt.Rows.Add("Disc", 99, "20 Only"); GridView1.DataSource = dt; GridView1.DataBind(); } }The front side code
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000" runat="server" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Item"> <ItemTemplate> <asp:LinkButton runat="server" ID="btnNameCommand" CommandName="Edit" Font-Underline="false" Font-Bold="true" ForeColor="Black" Text='<%# "<span class=tooltip " + String.Format("title={0}", Eval("Comment")).Replace(" "," ") + ">" + Eval("Item") + "</span>"%>'></asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>Best Regards,
Weibo Zhang
Member
109 Points
374 Posts
Re: Styling Tooltip - Text Space Issue
Mar 30, 2016 03:26 AM|Madog|LINK
Thanks Weibo, finally working with the replace of the space to the html entity.