Sep 29, 2011, 4:59 PM
Overcoming ExtJs Tooltip's max width of 500
ExtJs docs state that for the Tip's width property that "The maximum supported value is 500."
http://dev.sencha.com/deploy/ext-3.4...?class=Ext.Tip
Looking around it seems that the limitation is there because the CSS used for the tooltip background is a background image (to get the curved corners across browsers etc).
I still think that is a bit unfortunate because with the heavy markup that is a tooltip, they could have used rounded corner images on different divs (though to be fair, it becomes hard to do it properly with an anti-aliased corner border line as well as a background color). Furthermore a separate dom object (plus various events etc) is needed to give it a shadow.
Anyway, with modern browsers supporting border-radius, and background gradients and shadows etc, not only can we simplify this, we can also overcome the 500px limit at the same time (admittedly not often do I have the need for such a huge tooltip, but it if you do this might help!)
Overall strategy:
Example with Ext.Net:
1) The tooltip:
2) The css:
The background of #eee is a fallback for older browsers, as the next few background lines I use a subtle CSS3 gradient. I also add a border radius and box shadow.
You can also style the title and body further if you want (e.g. make the title bold, pad the body a bit etc - full example further below includes that)
Note, instead of MaxWidth="800" you can use AutoWidth="true", as well, for example.
Here's a full working example with a tiny bit more CSS:
Hope that helps!
http://dev.sencha.com/deploy/ext-3.4...?class=Ext.Tip
Looking around it seems that the limitation is there because the CSS used for the tooltip background is a background image (to get the curved corners across browsers etc).
I still think that is a bit unfortunate because with the heavy markup that is a tooltip, they could have used rounded corner images on different divs (though to be fair, it becomes hard to do it properly with an anti-aliased corner border line as well as a background color). Furthermore a separate dom object (plus various events etc) is needed to give it a shadow.
Anyway, with modern browsers supporting border-radius, and background gradients and shadows etc, not only can we simplify this, we can also overcome the 500px limit at the same time (admittedly not often do I have the need for such a huge tooltip, but it if you do this might help!)
Overall strategy:
- When defining the tooltip, change the baseCls to something other than x-tip (as ExtJs's own CSS is based on that)
- Then define your own CSS to apply border, background color/gradient, shadow etc etc as you want - applying it to just the containing element
Example with Ext.Net:
1) The tooltip:
<ext:ToolTip
BaseCls="custom-x-tip"
ID="RowTip"
Title="Example"
runat="server"
Target="tooltip-target-2"
ConstrainPosition="true"
ShadowOffset="0"
Floating="true"
Shadow="None"
MaxWidth="800"
>
<Content>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis dapibus augue, ac mollis arcu rutrum ac. Cras vestibulum varius sollicitudin. Quisque a quam augue, eget varius orci. Phasellus id purus justo. Praesent id odio arcu. Sed mattis magna ut diam tristique accumsan. Etiam congue erat non quam pellentesque euismod quis ac mauris. Ut dui eros, elementum eu porttitor a, pellentesque ac lorem.</div>
<div>Aliquam ornare eleifend nunc, sollicitudin bibendum orci rhoncus et. Nullam ut risus vel eros imperdiet iaculis at at elit. In hac habitasse platea dictumst. Morbi egestas justo ut nisl ultricies ullamcorper. Aliquam commodo suscipit fermentum. Pellentesque auctor ultricies ligula, eu sagittis tellus condimentum eu. Cras id lorem mi.</div>
</Content>
</ext:ToolTip>2) The css:
.custom-x-tip {
background:#eee;
background:-webkit-gradient(linear, 0 top, 0 bottom, color-stop(0.18, #fafafa), color-stop(0.64, #f0f0f0));
background:-moz-linear-gradient(center bottom, #f0f0f0 34%, #fafafa 82%) repeat scroll 0 0 transparent;
background:-ms-linear-gradient(bottom, #f0f0f0 34%, #fafafa 82%) repeat scroll 0 0 transparent;
background:linear-gradient(center bottom, #f0f0f0 34%, #fafafa 82%) repeat scroll 0 0 transparent;
border-radius:3px;
border:1px solid #aaa;
box-shadow:2px 2px 2px #ccc;
}The background of #eee is a fallback for older browsers, as the next few background lines I use a subtle CSS3 gradient. I also add a border radius and box shadow.
You can also style the title and body further if you want (e.g. make the title bold, pad the body a bit etc - full example further below includes that)
Note, instead of MaxWidth="800" you can use AutoWidth="true", as well, for example.
Here's a full working example with a tiny bit more CSS:
<%@ Page Language="C#" %>
<!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 runat="server">
<title>Tooltips that can be auto (or larger than 500px) width</title>
<style type="text/css">
body { font:0.8em/1.68 Verdana, sans-serif; padding:0 1em; }
p { margin-top:1em; }
.custom-x-tip {
background:#eee;
background:-webkit-gradient(linear, 0 top, 0 bottom, color-stop(0.18, #fafafa), color-stop(0.64, #f0f0f0));
background:-moz-linear-gradient(center bottom, #f0f0f0 34%, #fafafa 82%) repeat scroll 0 0 transparent;
background:-ms-linear-gradient(bottom, #f0f0f0 34%, #fafafa 82%) repeat scroll 0 0 transparent;
background:linear-gradient(center bottom, #f0f0f0 34%, #fafafa 82%) repeat scroll 0 0 transparent;
border-radius:3px;
border:1px solid #aaa;
box-shadow:2px 2px 2px #ccc;
}
/* style this one so if you have close buttons etc, they are padded too */
.custom-x-tip-header {
padding:0.25em;
}
.custom-x-tip-header-text {
font-weight:bold;
padding:0.25em;
}
.custom-x-tip-body {
padding:1em;
}
.custom-x-tip-body div:first-child {
margin-bottom:1em;
}
.example {
display:inline-block;
border:1px solid #ccc;
background:#f5f5f5;
padding:1.5em;
border-radius:3px;
}
.fails {
display:block;
margin-bottom:60px;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="HtmlForm" runat="server">
<div>
<p>ExtJs Tooltips are limited to a max width of around 500px because they unfortunately use a 500px wide CSS background image</p>
<p id="tooltip-target-1" class="example fails">Example 1: This is the problem with a tooltip wider than 500px (e.g. 800px)</p>
<ext:ToolTip
ID="ToolTip2"
Title="Example"
runat="server"
Target="tooltip-target-1"
ConstrainPosition="true"
ShadowOffset="0"
Floating="true"
Shadow="None"
MaxWidth="800"
>
<Content>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis dapibus augue, ac mollis arcu rutrum ac. Cras vestibulum varius sollicitudin. Quisque a quam augue, eget varius orci. Phasellus id purus justo. Praesent id odio arcu. Sed mattis magna ut diam tristique accumsan. Etiam congue erat non quam pellentesque euismod quis ac mauris. Ut dui eros, elementum eu porttitor a, pellentesque ac lorem.</div>
</Content>
</ext:ToolTip>
<p id="tooltip-target-2" class="example">Example 2: Rest mouse here to see tooltip with maxwidth 800</p>
<ext:ToolTip
BaseCls="custom-x-tip"
ID="RowTip"
Title="Example"
runat="server"
Target="tooltip-target-2"
ConstrainPosition="true"
ShadowOffset="0"
Floating="true"
Shadow="None"
MaxWidth="800"
>
<Content>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis dapibus augue, ac mollis arcu rutrum ac. Cras vestibulum varius sollicitudin. Quisque a quam augue, eget varius orci. Phasellus id purus justo. Praesent id odio arcu. Sed mattis magna ut diam tristique accumsan. Etiam congue erat non quam pellentesque euismod quis ac mauris. Ut dui eros, elementum eu porttitor a, pellentesque ac lorem.</div>
<div>Aliquam ornare eleifend nunc, sollicitudin bibendum orci rhoncus et. Nullam ut risus vel eros imperdiet iaculis at at elit. In hac habitasse platea dictumst. Morbi egestas justo ut nisl ultricies ullamcorper. Aliquam commodo suscipit fermentum. Pellentesque auctor ultricies ligula, eu sagittis tellus condimentum eu. Cras id lorem mi.</div>
</Content>
</ext:ToolTip>
<p>To overcome this, we get rid of the background image and use more flexible CSS instead</p>
<p id="tooltip-target-3" class="example">Example 3: Rest your mouse here to see a tooltip autowidth</p>
<ext:ToolTip
BaseCls="custom-x-tip"
ID="ToolTip1"
Title="Example"
runat="server"
Target="tooltip-target-3"
ConstrainPosition="true"
ShadowOffset="0"
Floating="true"
Shadow="None"
AutoWidth="true"
>
<Content>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis dapibus augue, ac mollis arcu rutrum ac.</div>
</Content>
</ext:ToolTip>
</div>
</form>
</body>
</html>Hope that helps!
Last edited by anup; Dec 29, 2011 at 4:59 PM.
Reason: Tweaked CSS - some (not all) vendor specific css removed (were in wrong order, anyway!)
