how to show tooltip (html) onMouseOver

7 posts, 0 answers
  1. Doug
    Doug avatar
    104 posts
    Member since:
    Aug 2014

    Posted 17 May 2017 Link to this post

    I have reviewed this demo but it seems to call to code behind and I am using a webservice and doing the tooltip client side.
    http://demos.telerik.com/aspnet-ajax/tooltip/examples/overview/defaultvb.aspx?show-source=true

    I currently have it working as a click on the event.
    how can I do it as a Mouse Over?

        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("TitleDiv").innerHTML = apt.get_subject();
            $get("descriptionDiv").innerHTML = decodeEntities(apt.get_description());
            tooltip.set_text($get("contentContainer").innerHTML);
            setTimeout(function () {
                tooltip.show(); 
            }, 20);
        }
     
        function decodeEntities(encodedString) {
            var textArea = document.createElement('textarea');
            textArea.innerHTML = encodedString;
            return textArea.value;
        }
     
    <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedView="MonthView"
         StartEditingInAdvancedForm="true" OnClientTimeSlotClick="OnClientTimeSlotClick"
        OnClientAppointmentsPopulating="OnClientAppointmentsPopulating" OnClientTimeSlotContextMenu="OnClientTimeSlotContextMenu"
        OnClientAppointmentWebServiceInserting="OnClientAppointmentWebServiceInserting"
        EnableDescriptionField="true" AppointmentStyleMode="Default"
        OnClientAppointmentDoubleClick="hideTooltip" OnClientAppointmentContextMenu="hideTooltip"
        OnClientAppointmentClick="OnClientAppointmentClick"
        OnClientDataBound="onSchedulerDataBound" ShowAllDayRow="False" OverflowBehavior="Expand" Height="100%">
     
    <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>
                    <br />
                    <div id="TitleDiv"></div>
                    <hr />
                    <div id="descriptionDiv"></div>
                </div>
    </telerik:RadToolTip>
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 22 May 2017 Link to this post

    Hello Doug,

    The following demo shows an example: http://demos.telerik.com/aspnet-ajax/scheduler/examples/radtooltip/defaultcs.aspx.

    You can use the same approach but use the web service load-on-demand for the tooltip manager: http://demos.telerik.com/aspnet-ajax/tooltip/examples/webservice/defaultcs.aspx.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Doug
    Doug avatar
    104 posts
    Member since:
    Aug 2014

    Posted 22 May 2017 in reply to Marin Bratanov Link to this post

    I don't think you looked at my specific request.
    those are adding appointments to the tooltip manager on the code behind of that page.
    I am loading my appointments using a webservice.

    when the click event happens for the appointment, it fires off the tooltip.

    I think what I would need is an event for the "mouseover" of the appointment added in the client code OR in the tag of RadScheduler, of which I see none.

    I am under the impression that this cannot be done with anything built into RadScheduler.

    but perhaps there is a way to manually add the mouseover events on data load (from a webservice call to get appointments).

    I would think the client side data populating happens at
    window.onSchedulerDataBound = function (sender, eventArgs) {
    I should be able to loop each appointment and add the tooltip call to each one. thou, I am unsure how to add the mouseover event call to each appointment.

  4. Doug
    Doug avatar
    104 posts
    Member since:
    Aug 2014

    Posted 22 May 2017 in reply to Marin Bratanov Link to this post

    I have been able to finally get the javascript to access every appointment in the data bound here is this code.
    I would need to find a way to add to each one the mouseover event (during the client side) so that onMouseover of the appointment it just calls up my function (used in the onclick event)

    window.onSchedulerDataBound = function (sender, eventArgs) {
        var apts = sender.get_appointments();
        for (var i = 0; i < apts.get_count() - 1; i++) {
            var apt = apts.getAppointment(i);
            alert(apt.get_id());
     
        }
    };
  5. Doug
    Doug avatar
    104 posts
    Member since:
    Aug 2014

    Posted 23 May 2017 Link to this post

    I was able to figure out how to add appointments to the tooltipManager with this code BUT have not figured out how to get the appointment object once the tooltip is called (also the normal alt tooltip is showing also - it would be nice to remove that)

    my code so far
            window.onSchedulerDataBound = function (sender, eventArgs) {
                var tooltip = $find('<%=RadToolTip1.ClientID %>');
                var tooltipManager = $find('<%=ttManager.ClientID %>');
                var apts = sender.get_appointments();
                for (var i = 0; i < apts.get_count() - 1; i++) {
                    var apt = apts.getAppointment(i);
                    if (!(apt.get_element() === null))//<--if apt is hidden by not showing a day
                        tooltipManager.createToolTip(apt.get_element());
                //apt.set_contentElement();
                }
            };
     
        function FillSchedToolTip(sender, eventArgs){
             //var id = eventArgs.get_appointment();//.get_id();
             alert(eventArgs);//<-- need to call showTooltip(apt);
        }
    //I think all I need to do is be able to call this function with the apt object
    function showTooltip(apt) {
  6. Doug
    Doug avatar
    104 posts
    Member since:
    Aug 2014

    Posted 23 May 2017 in reply to Doug Link to this post

    ok I have figured this out.
    I set the tooltip
    then tell the tooltip to be the appointment

    then when tooltip function is called I get the appointment from that tooltip object and send that to my last function.

            window.onSchedulerDataBound = function (sender, eventArgs) {
                var tooltip = $find('<%=RadToolTip1.ClientID %>');
                var tooltipManager = $find('<%=ttManager.ClientID %>');
                var apts = sender.get_appointments();
                for (var i = 0; i < apts.get_count() - 1; i++) {
                    var apt = apts.getAppointment(i);
                    if (!(apt.get_element() === null)){
                        var tooltip = tooltipManager.createToolTip(apt.get_element());
                        tooltip.set_value(apt);
                    }
                }
            };
     
        function FillSchedToolTip(sender, eventArgs){
            showTooltip(sender.get_value());//apt = sender.get_value()
        }
    //then show the appointment formatted
        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("TitleDiv").innerHTML = apt.get_subject();
            $get("descriptionDiv").innerHTML = decodeEntities(apt.get_description());
            tooltip.set_text($get("contentContainer").innerHTML);
            setTimeout(function () {
                tooltip.show(); 
            }, 20);
        }
        function decodeEntities(encodedString) {
            var textArea = document.createElement('textarea');
            textArea.innerHTML = encodedString;
            return textArea.value;
        }
  7. Doug
    Doug avatar
    104 posts
    Member since:
    Aug 2014

    Posted 06 Jun 2017 Link to this post

    had an error in the javascript loop was missing 1 entry (I didn't see a way to edit my posts)
    for (var i = 0; i < apts.get_count() - 1; i++) {

    should be

    for (var i = 0; i <= apts.get_count() - 1; i++) {
Back to Top