Show RadToolTip on appointment click entirely client-side implementation

Thread is closed for posting
3 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 01 Nov 2011 Link to this post

    Requirements

    RadControls version

     Q1 2011 or higher

    .NET version

     4.0

    Visual Studio version

     2010

    programming language C# and VB.NET
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION

    This project demonstrates how to implement entirely client-side showing RadToolTip on appointment click. The content of the tooltip is populated with the client API of the appointment object.

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
     
                function OnClientAppointmentClick(sender, args) {
                    var apt = args.get_appointment();               
                    showTooltip(apt);
                }
     
                function showTooltip(apt) {     
                        var tooltip = $find('<%=RadToolTip1.ClientID %>');
                        tooltip.set_targetControl(apt.get_element());
                        $get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");
                        $get("endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");
                        $get("descriptionDiv").innerHTML = apt.get_subject();
                        tooltip.set_text($get("contentContainer").innerHTML);
                        setTimeout(function () {
                            tooltip.show(); 
                        }, 20);
                    }
     
                function hideTooltip() {             
                    setTimeout(function () {
                        var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                        if (activeTooltip)
                        { activeTooltip.hide();}
                    }, 50);
                }
                         
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedDate="2011/11/01"
                SelectedView="MonthView" OnClientAppointmentDoubleClick="hideTooltip" OnClientAppointmentContextMenu="hideTooltip"
                OnClientAppointmentClick="OnClientAppointmentClick" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
                OnClientRecurrenceActionDialogShowing="hideTooltip"
                >
                <AdvancedForm Modal="true" />
            </telerik:RadScheduler>
            <telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" Position="BottomCenter"
                AutoCloseDelay="0" ShowEvent="FromCode" Width="250px" >
                <div id="contentContainer">
                    Starts on: <span id="startTime"></span>
                    <br />
                    Ends on: <span id="endTime"></span>
                    <hr />
                    Description:
                    <div id="descriptionDiv">
                    </div>
                </div>
            </telerik:RadToolTip>
        </telerik:RadAjaxPanel>
  2. 680C44FB-11D4-454B-9CB6-4DB80185E599
    680C44FB-11D4-454B-9CB6-4DB80185E599 avatar
    1 posts
    Member since:
    Jun 2015

    Posted 31 Jan 2016 in reply to 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD Link to this post

    Hi, this works ideally, but how to enable client side tool tip also for mouse over?
  3. B0275695-26B0-48C0-B5B7-EDC0BC9F8E54
    B0275695-26B0-48C0-B5B7-EDC0BC9F8E54 avatar
    3080 posts
    Member since:
    Apr 2022

    Posted 03 Feb 2016 Link to this post

    Hi,

    You can use the client - side implementation that is used in this online demo where a similar scenario worked correctly on mouse over.

    Regards,
    Plamen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.