What's New?

[CLOSED] tool tip and split button question

  1. #1
    Mar 27, 2012, 3:38 PM

    [CLOSED] tool tip and split button question

    Please see the attachment. I want to use a split button to display a tool tip...But I only want the tool tip to render when you mouse over the right side of the button. I don't need a drop down menu...I would want to add an icon in this space. Is this possible? Can you provide sample code if it is? Click image for larger version.  Name: samo.jpg  Views: 75  Size: 33.3 KB  ID: 4003
    Last edited by Daniil; Apr 02, 2012 at 9:01 PM. Reason: [CLOSED]
  2. #2
    Mar 27, 2012, 5:42 PM
    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>
  3. #3
    Mar 27, 2012, 11:13 PM
    Quote Originally Posted by Daniil View Post
    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>
    Thanks! Will check and see if this works

Similar Threads

  1. [CLOSED] Tool button not shown
    By stratek in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 30, 2012, 5:58 PM
  2. [CLOSED] Possible problems with Split Button in IE 9
    By GLD in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 17, 2012, 7:25 PM
  3. [CLOSED] Paging tool bar customization question.
    By rosua in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 04, 2012, 10:59 AM
  4. [CLOSED] Split Button behaviour
    By JonG in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 17, 2010, 8:49 AM
  5. SpecialKey listener for Split Button
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 26, 2010, 6:26 PM

Posting Permissions