Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Luke Wakefield
655
Change Tooltip CSS
posted

Hi,

Is it possible to change the style of tooltips for individual items in the web drop down?  All of our controls use a javascript function to display their tooltips because the standard tooltips do not display long enough.  These tooltips are styled by a tooltips.css file and I would like the tooltips for the items in the dropdown to be the same.  Below is an example of how we handle the tooltips for a standard text box.

 

 

<asp:TextBox ID="txtBatchNo" runat="server" CssClass="TextBoxes" onmouseout="hideTooltip()"onmouseover="showTooltip(event,'The batch or lot number of the product (on the label).');return false"MaxLength="35"></asp:TextBox>

And this is how I currently setup the WebDropDown.

<

 

ig:WebDropDown ID="ddTreatmentRoute" runat="server" DropDownAnimationType="Linear" DropDownContainerHeight="0px" DropDownContainerMaxHeight="0px" DropDownContainerWidth="0px"EnableDropDownAsChild="True" MultipleSelectionType="Checkbox" PageSize="0" StyleSetName="Office2007Blue" EnableRenderingAnchors="False" DisplayMode="DropDownList" ToolTip="Initial Tooltip for overall control.">

<Items>

 

<ig:DropDownItem Selected="False" Text="Please select" Value="0">

 

</ig:DropDownItem>

 

<ig:DropDownItem Selected="False" Text="Auricular use" Value="1" ToolTip="Item 1 tooltip">

 

</ig:DropDownItem>

 

<ig:DropDownItem Selected="False" Text="Cutaneous use" Value="2" ToolTip="Item 2 tooltip.">

 

</ig:DropDownItem>

 

<ig:DropDownItem Selected="False" Text="In-feed use" Value="3" ToolTip="Item 3 tooltip.">

 

</ig:DropDownItem>

 

</Items>

 

<Button AltText="" />

 

</ig:WebDropDown>

</ig:WebDropDown>

 

Thanks

Luke

  • 695
    Verified Answer
    posted

    Hello Luke,

    there are ItemMouseOver and ItemMouseOut client-side events, which you can use for adding a custom javascript function for displaying a tooltip. 

    <script type="text/javascript">
      function ItemMouseOver (sender, eventArgs) {
                 var item = eventArgs.get_value(); // gets a reference of a DropDownItem
                 var value = item.get_value(); // gets the item's value

                 //your custom tooltip code
            }
        function ItemMouseOut (sender, eventArgs) {
                //your custom tooltip code
            }
    </script>

     <ig:WebDropDown ID="ddTreatmentRoute" runat="server" DropDownAnimationType="Linear" Width="200px"
                DropDownContainerHeight="0px" DropDownContainerMaxHeight="0px" DropDownContainerWidth="0px"
                EnableDropDownAsChild="True" MultipleSelectionType="Checkbox" PageSize="0"
                EnableRenderingAnchors="False" DisplayMode="DropDownList" ToolTip="Initial Tooltip for overall control.">
                <ClientEvents ItemMouseOver="ItemMouseOver" ItemMouseOut="ItemMouseOut" />
                <Items>
                    <ig:DropDownItem Selected="False" Text="Please select" Value="0">
                    </ig:DropDownItem>
                    <ig:DropDownItem Selected="False" Text="Auricular use" Value="1" ToolTip="Item 1 tooltip">
                    </ig:DropDownItem>
                    <ig:DropDownItem Selected="False" Text="Cutaneous use" Value="2" ToolTip="Item 2 tooltip.">
                    </ig:DropDownItem>
                    <ig:DropDownItem Selected="False" Text="In-feed use" Value="3" ToolTip="Item 3 tooltip.">
                    </ig:DropDownItem>
                </Items>
            </ig:WebDropDown>

    Regards,
    Nikolai Dimitrov