Converting 'click' tooltip to 'normal' tooltip

16 posts, 0 answers
  1. Egbert
    Egbert avatar
    21 posts
    Member since:
    Dec 2010

    Posted 02 Dec 2013 Link to this post

    Hi,

    I'm now showing a tooltip by using a single click on an appointment. (see attachment)
    I like to show the tooltip as a 'normal' tooltip, so when mouse is on/over the appointment.

    How can I do this on the client side.

    I'm now using the following piece of code:

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
        CodeFile="Hours.aspx.cs" Inherits="Hours" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        <script type="text/javascript">
            //Shows whether an Appointment is inserted directly, or the
            //the Advanced Insert Form is opened when TreeView node is dropped on the Scheduler.
            var directlyInsertAppointment = false;
     
            function hideActiveToolTip() {
                var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                if (tooltip) {
                    tooltip.hide();
                }
            }
     
            function ClientAppointmentClick(sender, args) {
                var apt = args.get_appointment();
                showTooltip(apt);
            }
     
            function showTooltip(apt) {
                var attributes = apt.get_attributes();
                var tooltip = $find('<%=RadToolTip1.ClientID %>');
                tooltip.set_targetControl(apt.get_element());
                //// $get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");
                $get("startTime").innerHTML = apt.get_start().format("HH:mm ");
                $get("duration").innerHTML = attributes.getAttribute("Duration");
                $get("endTime").innerHTML = apt.get_end().format(" HH:mm");
                $get("appTitle").innerHTML = apt.get_subject();
                $get("projectTitle").innerHTML = attributes.getAttribute("ProjectTitle");
                $get("taskTitle").innerHTML = attributes.getAttribute("TaskTitle");
                var allowEditDelete = attributes.getAttribute("AllowEditDelete");
                if (allowEditDelete == "False") {
                    $get("closedStatus").innerHTML = "Closed";
                }
                else {
                    $get("closedStatus").innerHTML = "";
                }
     
                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);
            }
     
            function nodeDropping(sender, eventArgs) {
                var htmlElement = eventArgs.get_htmlElement();
                var scheduler = $find('<%= RadScheduler1.ClientID %>');
     
                if (isPartOfSchedulerAppointmentArea(htmlElement)) {
                    //Gets the TimeSlot where an Appointment is dropped.
                    var timeSlot = scheduler.get_activeModel().getTimeSlotFromDomElement(htmlElement);
                    var startTime = timeSlot.get_startTime();
                    var endTime = new Date(startTime);
     
                    //Gets all the data needed for the an Appointment, from the TreeView node.
                    var node = eventArgs.get_sourceNode();
                    var text = node.get_text();
                    var taskID = node.get_value();
                    //var attributes = node.get_attributes();
                    var duration = 0;
                    //endTime.setMinutes(endTime.getMinutes() + parseInt(duration));
                    var speaker = taskID;
                    //var parentValue = node.get_parent().get_value();
                    var category = 0;
     
                    //New appointment is created. The start/end time, subject and category are set.
                    var newAppointment = new Telerik.Web.UI.SchedulerAppointment();
                    newAppointment.set_start(startTime);
                    newAppointment.set_end(endTime);
                    newAppointment.set_subject(text);
     
                    //Checks for the user's choice of the method for inserting Appointments.
                    if (directlyInsertAppointment) {
                        scheduler.insertAppointment(newAppointment);
                    }
                    else {
                        //If Advanced Form is opened, the information from the TreeVew node is stored in a hidden input.
                        //var appointmentInfo = { subject: text, duration: duration, speaker: speaker, category: category };
                        //var appointmentInfoSerialized = Sys.Serialization.JavaScriptSerializer.serialize(appointmentInfo);
                        $get("<%=HiddenInputAppointmentInfo.ClientID%>").value = taskID; //  appointmentInfoSerialized;
                        scheduler.showInsertFormAt(timeSlot);
                    }
                }
                else {
                    //The node was dropped elsewhere on the document.
                    eventArgs.set_cancel(true);
                }
            }
     
            function isPartOfSchedulerAppointmentArea(htmlElement) {
                // Determines if an HTML element is part of the scheduler appointment area.
                // This can be either the rsContent or the rsAllDay div (in day and week view).
                return $telerik.$(htmlElement).parents().is("div.rsAllDay") ||
                                $telerik.$(htmlElement).parents().is("div.rsContent")
            }
     
            function AppointmentDoubleClick(sender, args) {
                var apt = args.get_appointment();
                var attributes = apt.get_attributes();
                var allowEditDelete = attributes.getAttribute("AllowEditDelete");
                if (allowEditDelete == "True") {
                    window.location.href = "hoursitem.aspx";
                }
            }
     
            function appointmentMoving(sender, args) {
                // hideTooltip();
            }
        </script>
        <style type="text/css">
            .divRadios
            {
                margin-bottom: 15px;
            }
            .background
            {
                background: url("arrows.png") no-repeat scroll 0 0 transparent;
                padding: 115px 0 0 0px;
                margin-left: 45px;
            }
             
            #RadTreeView1
            {
                margin-bottom: 15px;
            }
            .divTree
            {
                float: left;
                width: 20%;
            }
            .schedulerPositioning
            {
                width: 80%;
                float: left;
                display: block;
            }
            .summaryInfo
            {
                padding: 0;
                margin: 0;
                width: 99.9%;
                float: left;
                border: 1px solid black;
                background-color: LightGray;
            }
            .summaryTextBoxColumn
            {
                width: 50px;
            }
            input[readonly]
            {
                background-color: #F0F0F0 !important;
                color: #303030 !important;
            }
            #RadTextBox
            {
                readonly: true;
            }
        </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <script type="text/javascript">
        </script>
        <div class="summaryInfo">
            <table>
                <tr>
                    <td>
                        Ma
                    </td>
                    <td class="summaryTextBoxColumn">
                        <telerik:RadTextBox runat="server" ID="tbMonday" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        Di
                    </td>
                    <td class="summaryTextBoxColumn">
                        <telerik:RadTextBox runat="server" ID="tbTuesday" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        Wo
                    </td>
                    <td class="summaryTextBoxColumn">
                        <telerik:RadTextBox runat="server" ID="tbWednesday" Width="45px" Enabled="false"
                            DisabledStyle-BorderColor="DarkGray">
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        Do
                    </td>
                    <td class="summaryTextBoxColumn">
                        <telerik:RadTextBox runat="server" ID="tbThursday" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        Vr
                    </td>
                    <td class="summaryTextBoxColumn">
                        <telerik:RadTextBox runat="server" ID="tbFriday" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        Za/Zo
                    </td>
                    <td class="summaryTextBoxColumn">
                        <telerik:RadTextBox runat="server" ID="tbSatSunday" Width="45px" Enabled="false"
                            DisabledStyle-BorderColor="DarkGray">
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        Week
                    </td>
                    <td class="summaryTextBoxColumn">
                        <telerik:RadTextBox runat="server" ID="tbWeek" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        Jaar
                    </td>
                    <td class="summaryTextBoxColumn">
                        <telerik:RadTextBox runat="server" ID="tbYear" Width="55px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                        </telerik:RadTextBox>
                    </td>
                </tr>
            </table>
        </div>
        <div class="schedulerPositioning">
            <telerik:RadScheduler ID="RadScheduler1" runat="server" OnAppointmentInsert="RadScheduler1_AppointmentInsert"
                OnAppointmentUpdate="RadScheduler1_AppointmentUpdate" OnAppointmentDelete="RadScheduler1_AppointmentDelete"
                OnFormCreating="RadScheduler1_FormCreating" OnAppointmentCancelingEdit="RadScheduler1_AppointmentCancelingEdit"
                RowHeight="17" OnNavigationCommand="RadScheduler1_NavigationCommand" OnNavigationComplete="RadScheduler1_NavigationComplete"
                MinutesPerRow="15" DayStartTime="06:30:00" DayEndTime="17:30:00" FirstDayOfWeek="Monday"
                OnAppointmentClick="RadScheduler1_AppointmentClick" OnAppointmentCommand="RadScheduler1_AppointmentCommand"
                OnClientAppointmentClick="ClientAppointmentClick" LastDayOfWeek="Friday" MultiDayView-NumberOfDays="5"
                Height="80%" OnClientAppointmentDoubleClick="AppointmentDoubleClick" SelectedView="WeekView"
                CustomAttributeNames="TaskTitle, ProjectTitle, Duration, AllowEditDelete" EnableCustomAttributeEditing="false"
                OnAppointmentDataBound="RadScheduler1_AppointmentDataBound" MonthView-MinimumRowHeight="9"
                MonthView-VisibleAppointmentsPerDay="6" TimelineView-UserSelectable="False">
            </telerik:RadScheduler>
            <telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" Position="BottomCenter"
                AutoCloseDelay="0" ShowEvent="FromCode" Width="250px">
                <div id="contentContainer">
                    <div class="appointment-tooltip">
                        <b>Titel:</b> <span id="appTitle"></span>
                        <p>
                            <b>Tijd:</b> <span id="startTime"></span>-<span id="endTime"> </span>
                            <br />
                            <b>Duur: </b><span id="duration"></span>
                        </p>
                        <hr />
                        <b>Project:</b> <span id="projectTitle"></span>
                        <br />
                        <b>Taak:</b> <span id="taskTitle"></span>
                        <br />
                        <center>
                            <b><span id="closedStatus" style="color: #FF0000;"></span></b>
                        </center>
                    </div>
                </div>
            </telerik:RadToolTip>
            <input id="HiddenInputAppointmentInfo" name="HiddenInputAppointmentInfo" type="hidden"
                runat="server" />
        </div>
        <%--    <div id="yourHiddenPanel" style="visibility: visible; background-color: #00FF00;
            height: 30px;">
            <asp:Button runat="server" Text="gggggg" />
        </div>
        --%>
        <div class="divTree">
            <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="False"
                Skin="Vista" ShowLineImages="true" OnClientNodeDropping="nodeDropping" Visible="true">
            </telerik:RadTreeView>
        </div>
        <telerik:RadWindowManager runat="server" RestrictionZoneID="offsetElement" ID="RadWindowManager1"
            EnableShadow="true" ShowOnTopWhenMaximized="false">
            <Windows>
                <telerik:RadWindow ID="RadWindowWarning" VisibleOnPageLoad="false" Title="Warning"
                    runat="server" Modal="true" AutoSize="false" Width="400" Height="160" VisibleTitlebar="true"
                    VisibleStatusbar="False" Behaviors="None">
                    <ContentTemplate>
                        <p style="text-align: center;">
                            <asp:Label runat="server" ID="labelWarning" Text="Warning text!"></asp:Label>
                        </p>
                        <p style="padding: 10px; text-align: center;">
                            <telerik:RadButton ID="ButtonWindowOK" Text="OK" AutoPostBack="true" runat="server"
                                OnClick="ButtonWindowOK_Click" />
                        </p>
                    </ContentTemplate>
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
    </asp:Content>

    Thanks,
    Egbert
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Dec 2013 Link to this post

    Hi Egbert

    Here is a nice demo which marks your requirement.
    Scheduler - Using RadToolTip
    Hope this helps

    Thanks
    Shinu
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Egbert
    Egbert avatar
    21 posts
    Member since:
    Dec 2010

    Posted 03 Dec 2013 Link to this post

    Hi,

    I've seen this example, but the combination with server side and client side makes it difficult for me to see what I need.
    I like to see an example with only the stuff I need for client side tooltips.

    Best regards,
    Egbert
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 05 Dec 2013 Link to this post

    Hello Egbert,

    Please find attached a sample project with RadScheduler control implementing tool tip functionality on the client side.



    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Egbert
    Egbert avatar
    21 posts
    Member since:
    Dec 2010

    Posted 07 Dec 2013 Link to this post

    Hello Boyan,

    Thank you for the quick response and this example.
    The problem now is, I can't get your example working.

    It's running, tooltip appears and shows the Loading... message.
    But after that, no data in tooltip and tooltip disappears ;-(

    Thanks and best regards,
    Egbert
  7. Egbert
    Egbert avatar
    21 posts
    Member since:
    Dec 2010

    Posted 11 Dec 2013 Link to this post

    Hi,

    Do you have an example for me that works?
    Or is this example working and am I doing something wrong?

    Best regards,
    Egbert
  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 11 Dec 2013 Link to this post

    Hello,

    I would like to apologize for any inconveniences caused.

    I have modified the sample project in order to show the appointment tool tip properly. Please find it attached to this response.


    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. Egbert
    Egbert avatar
    21 posts
    Member since:
    Dec 2010

    Posted 16 Dec 2013 Link to this post

    Hi,

    Everything works great now.

    Thanks....
  10. Anatoliy
    Anatoliy avatar
    37 posts
    Member since:
    Oct 2012

    Posted 21 Jan 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    Thank you for sample,
    it's work fine if there no other controls which tool-tip must be overridden too. 
    How to be in such case?

    In my solution I use asp master page structure.
    In  master page I have RadToolTipManager (which overrides tool-tip in all related child-pages).
    So, you may guess what I have on my 'Scheduling' page (with RadScheduler control),
    there is RadToolTip that I show with single click appointment.

    What you can propose me?

    Best regards, Anatoliy

  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Jan 2015 Link to this post

    Hello,

    I would suggest using a RadToolTip control in the child page and show the tool tip on client appointment click as shown below:
    //JavaScript
    var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
               tooltip.hide();
               if (tooltip) {
     
                   var apt = args.get_appointment();
                   $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);
                   tooltip.set_targetControl(args.get_appointment().get_element());
                   tooltip.show();
               }



    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. Anatoliy
    Anatoliy avatar
    37 posts
    Member since:
    Oct 2012

    Posted 26 Jan 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan Dimitrov,

    You must read thoroughly with my message! Do you understand what I mean?

    'there is RadToolTip that I show with single click appointment.'  == 'show the tool tip on client appointment click'

    so question is still waiting for answering:

    If there (on web-page with scheduler control) exists other controls which tool-tip must be overridden too. 
    How to be in such case?

    Best regards, Anatoliy
  13. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 27 Jan 2015 Link to this post

    Hello Anatoliy,

    I am afraid that I am not complete sure that I understand your scenario.

    A possible solution to avoid the automatic tool tip generation functionality is to set the RadToolTipManager property AutoTooltipify to 'false'. The following demo shows how to enable the RadToolTipManager automatic tool tip generation.

    If you want to show tool tips for other controls except the RadScheduler you can user the RadToolTipManager TargetControls collection as explained in the Using the TargetControls Collection article.


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. Anatoliy
    Anatoliy avatar
    37 posts
    Member since:
    Oct 2012

    Posted 03 Feb 2015 in reply to Boyan Dimitrov Link to this post

    Hello Boyan,

    I wrote a simple project with RadScheduler and RadButton which both are using RadTooltips.
    I'm confused with empty tooltips under appointments, but sometimes they are filled.
    So, can you check it and show me the right decision?

    Best regards, Anatoliy
  15. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 06 Feb 2015 Link to this post

    Hello Anatoliy,

    I reviewed your code and it the problem is caused by setting the RadToolTipManager AutoTooltipify="true" in the master page.

    Since by default the appointment elements have title attribute the RadToolTipManager from the master page tries to show a tool tip for those elements. In the same time the RadToolTipManager from the Scheduler page also tries to show your custom tool tip for the same element.
    This leads to conflict and might cause some unexpected behavior ( for example showing empty tool tip and etc.).
    This is why we suggest using this functionality of the RadToolTopManager only for some really basic cases ( a simple form with label controls where you want to override the default tool tip). For some complex scenario is quite possible to face some issues.

    In this case the only solution would be to stop the auto tooltipify functionality of the RadToolTipManager in the master page.
    <telerik:RadToolTipManager runat="server" ID="MainRadToolTipManager" ShowEvent="OnMouseOver"
                    ShowDelay="200" AutoCloseDelay="5000" AutoTooltipify="false" RelativeTo="Element" />


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  16. Anatoliy
    Anatoliy avatar
    37 posts
    Member since:
    Oct 2012

    Posted 06 Feb 2015 in reply to Boyan Dimitrov Link to this post

    Hi,

    I'm looking for using attractive for my web-site users design.

    So what can you suggest for applying both types of tooltips?

    Cause if I switch off AutoTooltipify, tooltip on a button became default. This style feature can't be particular for one privilege control (RadScheduler).

    Regards, Anatoliy
  17. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 11 Feb 2015 Link to this post

    Hello Anatoliy,

    In order to apply tool tip for the button control or any other control on the page except for the RadScheduler you can show the tool tip explicitly as demonstrated in this demo.

    My suggestion would be showing the tool tip on mouse over on all elements that have title attribute except for the appointments and time slots (you already have a tool tip for the appointments).
    //selector
    $telerik.$("[title]:not([id*='RadScheduler'])").not("td")


    In case of Ajax scenario you might need to retrieve those elements using this selector after each post-back. This is due to the fact that if you add some new elements to the page with title attribute they will not not be part of the collection.

    You can use PageRequestManager endRequest Event, iterate through the elements within the update panel and attach mouse over event in order to show the tool tip for those elements as well.

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017