Date Picker Tooltip?

2 posts, 0 answers
  1. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 16 Apr 2012 Link to this post

    Hi!

    We validate controls on form submit. We are trying to set a tooltip when a required field is missing--it shows up when the user hovers over the control. This works great on an input box but we can't seem to get the date picker to work (see attached.) Below is the relevant code. Any idea how to add a tooltip to the date picker?

    Thanks!
    <telerik:RadDatePicker ID="radDatePicker" MinDate="1/1/1000" runat="server" Skin="Windows7"
            AutoPostBack="false" EnableViewState="true">
            <Calendar ID="calendarForDatePicker" runat="server" UseRowHeadersAsSelectors="False"
                UseColumnHeadersAsSelectors="False" ViewSelectorText="x" AutoPostBack="false"
                EnableViewState="true">
            </Calendar>
            <DateInput ID="dateInputForDatePicker" runat="server" DisplayDateFormat="M/d/yyyy"
                DateFormat="M/d/yyyy" AutoPostBack="false" CssClass="datePickerBox" EnableViewState="true">
            </DateInput>
            <DatePopupButton ImageUrl="" HoverImageUrl="" EnableViewState="true"></DatePopupButton>
        </telerik:RadDatePicker>
     
     
    function isDateInputFieldInError(control, message) {
                var errorState = true;
                var controlRef = $find(control);
                var dateInput = controlRef.get_dateInput();
                if (trimInput(dateInput.get_value()) == "") {
                    dateInput._invalid = true;
                    addToolTipToControl(document.getElementById(control), message);
                    dateInput.get_styles().InvalidStyle[0] += "border: 1px solid #D18185 !important;";
                }
                else {
                    dateInput._invalid = false;
                    errorState = false;
                }
                dateInput.updateCssClass();
                return errorState;
            }
     
            function isInputFieldInError(control, message) {
                var errorState = true;
                var controlRef = $find(control);
                if (trimInput(controlRef.get_value()) == "") {
                    controlRef._invalid = true;
                    addToolTipToControl(document.getElementById(control), message);
                }
                else {
                    controlRef._invalid = false;
                    errorState = false;
                }
                controlRef.updateCssClass();
                return errorState;
            }

  2. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 16 Apr 2012 Link to this post

    function addToolTipToControl(element, message) {
                var tooltipManager = $find("<%= radToolTipManager.ClientID %>");
     
                //If the user hovers the image before the page has loaded, there is no manager created
                if (!tooltipManager) return;
     
                //Find the tooltip for this element if it has been created
                var tooltip = tooltipManager.getToolTipByElement(element);
     
                //Create a tooltip if no tooltip exists for such element
                if (!tooltip) {
                    tooltip = tooltipManager.createToolTip(element);
                    tooltip.set_text(message);
                }
     
                //Let the tooltip's own show mechanism take over from here - execute the onmouseover just once
                element.onmouseover = null;
            }
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top