[CLOSED] ComboBox Tooltip

[FpNetWorth]

I Try This

 <ext:ComboBox ID="ComboBox1" runat="server" LazyInit="false">
        <Items>
            <ext:ListItem Text="Item 1" Value="1" />
            <ext:ListItem Text="Item 2" Value="2" />
        </Items>
    </ext:ComboBox>
    <ext:ToolTip ID="ToolTip4"
            runat="server"
            Target="={#{ComboBox1}.list}"
            Delegate=".x-combo-list-item"
            TrackMouse="true">
            <Listeners>
                <Show Handler="this.body.update(this.triggerElement.outerText);" />
            </Listeners>
        </ext:ToolTip>
                                                      <ext:ComboBox BlankText="Mandatory Field" ID="drpassetType" runat="server" AutoPostBack="false" 
                                                          DisplayField="Description" Editable="false" EmptyText="Select..." 
                                                          FieldLabel="Asset Type" ForceSelection="true" LazyInit="false" Mode="Local" SelectOnFocus="true" 
                                                          StoreID="AssetType1" TriggerAction="All" TypeAhead="true" 
                                                          ValueField="ID_Asset_Type" Width="140">
                                                          <ToolTips>
                                                          <ext:ToolTip ID="trrr" runat="server" TrackMouse="true"  Target="={#{drpassetType}.list}">
                                                          <Listeners>
                                                         <%-- <Show Handler="var record = drpassetType.findRecord(drpassetType.valueField, drpassetType.getValue()); this.body.update(record ? 'Value: ' + record.get(drpassetType.valueField) + '<br /> Text: ' + record.get(drpassetType.displayField) : 'Empty');"/>--%>
                                                         <Show Handler="this.body.update(this.triggerElement);" />
                                                          </Listeners>
                                                          </ext:ToolTip>
                                                          </ToolTips>
                                                          <Listeners>
                                                              <Select Handler="SetValue(); Coolite.AjaxMethods.getAsset(#{drpassetType}.getValue());" />
                                                          </Listeners>
                                                          
                                                      </ext:ComboBox>
                                            <%--          <ext:ToolTip ID="ToolTip3"
                                                             runat="server"
                                                             Target="={#{drpassetType}.list}"
                                                             Delegate=".x-combo-list-item"
                                                             TrackMouse="true">
                                                       <Listeners>
                                                           <Show Handler="this.body.update(this.triggerElement.valueField);" />
                                                      </Listeners>
                                                     </ext:ToolTip>--%>

and I've added This

<script type="text/javascript">
    Ext.ToolTip.override({
        onMouseMove: function (e) {
            var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
            if (t) {
                this.targetXY = e.getXY();
                if (t === this.triggerElement) {
                    if (!this.hidden && this.trackMouse) {
                        this.setPagePosition(this.getTargetXY());
                    }
                } else {
                    this.hide();
                    this.lastActive = new Date(0);
                    this.onTargetOver(e);
                }
            } else if (!this.closable && this.isVisible()) {
                this.hide();
            }
        },

        onTargetOver: function (e) {
            if (this.disabled || e.within(this.target.dom, true)) {
                return;
            }
            var t = e.getTarget(this.delegate);
            if (t) {
                this.triggerElement = t;
                this.clearTimer('hide');
                this.targetXY = e.getXY();
                this.delayShow();
            }
        }
    });
    </script>

and it doesn't work any help please?? i need to show the item displayfield in the tooltip.
thanks

[Daniil]

Hi,

Please clarify what version do you use? 0.8.x ?

[FpNetWorth]

i m using version 0.8.x. it s working but showing only the first item of the comboBox
it s not changing when the mouse is over other items any help ?

[Daniil]

Hi,

Under 0.8.x it must look like this, see <CustomConfig>.

Example

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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>Coolite 0.8.X Example</title>
    <ext:ScriptContainer runat="server" />

    <script type="text/javascript">
        Ext.ToolTip.override({
            onMouseMove : function (e) {
                var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
                if (t) {
                    this.targetXY = e.getXY();
                    if (t === this.triggerElement) {
                        if (!this.hidden && this.trackMouse) {
                            this.setPagePosition(this.getTargetXY());
                        }
                    } else {
                        this.hide();
                        this.lastActive = new Date(0);
                        this.onTargetOver(e);
                    }
                } else if (!this.closable && this.isVisible()) {
                    this.hide();
                }
            },

            onTargetOver : function (e) {
                if (this.disabled || e.within(this.target.dom, true)) {
                    return;
                }
                var t = e.getTarget(this.delegate);
                if (t) {
                    this.triggerElement = t;
                    this.clearTimer('hide');
                    this.targetXY = e.getXY();
                    this.delayShow();
                }
            }
        });
    </script>

</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" />
    <ext:ComboBox ID="ComboBox1" runat="server" LazyInit="false">
        <Items>
            <ext:ListItem Text="Item 1" Value="1" />
            <ext:ListItem Text="Item 2" Value="2" />
        </Items>
    </ext:ComboBox>
    <ext:ToolTip runat="server" Target="={#{ComboBox1}.list}" TrackMouse="true">
        <CustomConfig>
            <ext:ConfigItem Name="delegate" Value=".x-combo-list-item" Mode="Value" />
        </CustomConfig>
        <Listeners>
            <Show Handler="this.body.update(this.triggerElement.outerText);" />
        </Listeners>
    </ext:ToolTip>
    </form>
</body>
</html>

[FpNetWorth]

solved,, Thank you Daniil

[FpNetWorth]

Daniii
bad news i try the script with internet explorer and it s working but when using Mozilla Firefox nothing appear in the tooltip
Any help ???

[Daniil]

Hi,

Please use

<Show Handler="this.body.update(this.triggerElement.innerHTML);" />

instead of

<Show Handler="this.body.update(this.triggerElement.outerText);" />