PDA

View Full Version : [OPEN] [#314] Tooltip is clipping its title



vadym.f
Aug 01, 2013, 8:27 PM
Hi,

This should be a fairly basic question. What's the property to configure on the ToolTip object in order for it to display the full Title by default? In my setup it displays the first three letters only followed by ellipses.



<ext:Button ID="Button1" runat="server" Text="Cancel and Close" Icon="Cancel">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Anchor="top" Title="<nobr>Cancel and Close</nobr>">
</ext:ToolTip>
</ToolTips>
</ext:Button>

Baidaly
Aug 02, 2013, 1:16 AM
Hello!

You should set Width or MinWidth for the tooltip. This ellipsis defined by CSS rule text-overflow.



<ext:ToolTip ID="ToolTip1" runat="server" Anchor="top" Title="<nobr>Cancel and Close</nobr>" Width="200">
</ext:ToolTip>

vadym.f
Aug 02, 2013, 2:10 AM
Thanks! But isn't there any way not to worry about setting the calculated width and just let it auto-grow as needed? I suppose that was the default behavior in 1.x, which was taken for granted.

Baidaly
Aug 02, 2013, 2:17 AM
Tooltip expands only for the width of inner text not for width of the title.

vadym.f
Aug 02, 2013, 3:17 AM
Does it mean that I need to use a different property to set the Tooltip text for it to auto-grow?

Baidaly
Aug 02, 2013, 4:51 AM
Tooltip has two main properties: Title and Html. However, Tooltip adjusts its width only for Html not for Title.

Daniil
Aug 02, 2013, 6:38 AM
Hi,

A bit of regress. Interesting what Sencha think about it.
http://www.sencha.com/forum/showthread.php?269164

vadym.f
Aug 02, 2013, 1:37 PM
Thank you guys! My sense is we should wait for the Sencha fix to be committed to SVN, correct?

Daniil
Aug 02, 2013, 2:09 PM
The change looks obvious, but I am not sure 100% sure. Also it doesn't look critical. So, yes, could you apply that override in your application for now?

Then Sencha will fix, it will come to Ext.NET shortly.

Daniil
Aug 02, 2013, 2:28 PM
Created an Issue to track it.
https://github.com/extnet/Ext.NET/issues/314

vadym.f
Aug 02, 2013, 2:43 PM
Is this the override?



Ext.define('TipFix', {
override: 'Ext.tip.QuickTip',
shrinkWrapDock: true
});


Is everything set up correctly because it doesn't fix the issue in the code below?



<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ext.Net 2.x</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<script type="text/javascript">
Ext.define('TipFix', {
override: 'Ext.tip.QuickTip',
shrinkWrapDock: true
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Some Test">
<ToolTips>
<ext:ToolTip runat="server" ShrinkWrapDock="true" Anchor="top" Title="<nobr>Click here to do some test</nobr>">
</ext:ToolTip>
</ToolTips>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Aug 02, 2013, 3:57 PM
That override is for QuickTips.

Since you are using a common ToolTip, an override should be:

Ext.define('TipFix2', {
override: 'Ext.tip.ToolTip',
shrinkWrapDock: true
});

Though, I am not sure Sencha will apply it for common ToolTips by default. I asked.

In any way, the ShrinkWrapDock="true" setting should work. Currently, it doesn't and it is a bug. Fixed in SVN.

vadym.f
Aug 02, 2013, 4:33 PM
Confirmed. The TipFix2 override and SVN fix work well for my test case. Thanks!

Daniil
Aug 02, 2013, 4:57 PM
The TipFix2 override and SVN fix work well for my test case.

Please note that the override and the ShrinkWrapDock="true" setting are different solutions. They are not supposed to be used together.

vadym.f
Aug 02, 2013, 5:09 PM
I just removed the override leaving ShrinkWrapDock="true" in place and the Tooltip seems to stretch accordingly.