PDA

View Full Version : Overcoming ExtJs Tooltip's max width of 500



anup
Sep 29, 2011, 4:59 PM
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.0/docs/?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>



In the above, my base cls is "custom-x-tip" - I've also set maxWidth to 800 and turned Shadow off so we can do it ourselves in CSS (in my case it is so cosmetic that if browsers like IE6, 7 and 8 do not support it, doesn't matter.)

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;
}


That's all there is really (and its just an example that you could change to whatever you want)

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>


Also see attached screenshot examples. The top tooltip in the screenshots is the existing problem. The other two are examples of the solution in action.

Hope that helps!

geoffrey.mcgill
Sep 29, 2011, 6:56 PM
Excellent sample. I'm sure this will come in handy for others in the community.

Thanks for sharing.

anup
Sep 30, 2011, 10:00 PM
Thanks for that.

It is a shame that more generally some of ExtJs's rendering is quite heavy on the DOM - I can understand that though - IE 6 in particular has been an important target for ExtJs and it needs those extra hooks; and a lot of these components were written a while back when CSS3 wasn't as widespread. But hopefully going forward they'll optimize and use more CSS3 (like they do with Touch) so buttons and menus in particular can become a lot simpler and lighter on the browser...!

Vladimir
Oct 01, 2011, 6:52 AM
ExtJS 4 already uses that approach, CSS3 is used if browser supports it (for example, images are not used for a button under Chrome, FF, IE 9 but for IE8 there are predefined images for button rendering)

geoffrey.mcgill
Oct 01, 2011, 7:23 PM
Yes, the next Ext.NET major release (v2) which includes ExtJS 4 does include some adaptive rendering capabilities. Features of HTML5 are integrated, in supported browsers.