Hi,
I can't see a good way to achieve the requirement using a SplitButton.
I can suggest the following solution.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
string iconUrl = ResourceManager1.GetIconUrl(Icon.Information),
cls = "button-tooltip",
styles = string.Format(@".{0} {{background-image:url({1});}}", cls, iconUrl);
this.ResourceManager1.RegisterClientStyleBlock(cls, styles);
}
}
</script>
<!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>Ext.NET Example</title>
<script type="text/javascript">
var onAfterRender = function (btn) {
var html = "<span class='button-tooltip'></span>";
btn.el.child("em").insertHtml("beforeEnd", html);
};
</script>
<style type="text/css">
.button-tooltip {
background-repeat: no-repeat;
background-position: 0 center;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: top;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Button
ID="Button1"
runat="server"
Icon="Add"
Text="Button">
<Listeners>
<AfterRender Fn="onAfterRender" />
</Listeners>
</ext:Button>
<ext:ToolTip
ID="ToolTip1"
runat="server"
Target="Button1"
Delegate=".button-tooltip"
Html="Hello World!" />
</form>
</body>
</html>