PDA

View Full Version : [CLOSED] ToolTip cover others buttons



Mario
Feb 09, 2015, 10:12 AM
The code:



<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" ID="ResourceManagerMain" />

<ext:Viewport runat="server" ID="ViewportMain" Layout="BorderLayout" PaddingSpec="5 5 5 5">
<Items>
<ext:Panel runat="server" ID="PanelMain" Flex="1" Region="Center">
<BottomBar>
<ext:Toolbar runat="server" >
<Items>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Text="Button 1" Width="150">
<ToolTips>
<ext:ToolTip
runat="server"
Anchor="left"
AnchorOffset="20"
Html="Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla" />
</ToolTips>
</ext:Button>
<ext:ToolbarSpacer runat="server" />
<ext:Button runat="server" Text="Button 2" Width="150">
<ToolTips>
<ext:ToolTip
runat="server"
Anchor="left"
AnchorOffset="20"
Html="Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla" />
</ToolTips>
</ext:Button>
<ext:ToolbarSpacer runat="server" />
<ext:Button runat="server" Text="Button 3" Width="150">
<ToolTips>
<ext:ToolTip
runat="server"
Anchor="left"
AnchorOffset="20"
Html="Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla" />
</ToolTips>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


In this code the ToolTip message is showed to left of the button...
It's possible show the ToolTip message ALWAYS to top the buttons?

The Property

Anchor="top"
not works...

Example:
http://forums.ext.net/attachment.php?attachmentid=20631&stc=1

Solutions?
Tnx

Daniil
Feb 10, 2015, 6:55 PM
Hi Mario,

I can suggest the following solution.

Key points:

1. The override inside the <head>.
2. The ToolTips' CustomConfig.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v3 Example</title>

<script>
Ext.tip.ToolTip.override({
getTargetXY: function () {
if (this.customAlign) {
return this.getAlignToXY(this.target, this.customAlign);
} else {
return this.callParent(arguments);
}
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server">
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Text="Button 1" Width="150">
<ToolTips>
<ext:ToolTip
runat="server"
Html="Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla">
<CustomConfig>
<ext:ConfigItem Name="customAlign" Value="br-tl" Mode="Value" />
</CustomConfig>
</ext:ToolTip>
</ToolTips>
</ext:Button>
<ext:ToolbarSpacer runat="server" />
<ext:Button runat="server" Text="Button 2" Width="150">
<ToolTips>
<ext:ToolTip
runat="server"
Html="Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla">
<CustomConfig>
<ext:ConfigItem Name="customAlign" Value="br-tl" Mode="Value" />
</CustomConfig>
</ext:ToolTip>
</ToolTips>
</ext:Button>
<ext:ToolbarSpacer runat="server" />
<ext:Button runat="server" Text="Button 3" Width="150">
<ToolTips>
<ext:ToolTip
runat="server"
Html="Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla<BR>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla">
<CustomConfig>
<ext:ConfigItem Name="customAlign" Value="br-tl" Mode="Value" />
</CustomConfig>
</ext:ToolTip>
</ToolTips>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Mario
Feb 11, 2015, 5:11 AM
Tnx Daniil....

The your solution is OK.

Close the thread.