This is a migrated thread and some comments may be shown as answers.

how to show tooltip (html) onMouseOver

6 Answers 601 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Doug asked on 17 May 2017, 04:44 PM
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>

6 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 22 May 2017, 10:20 AM

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.
0
Doug
Top achievements
Rank 1
answered on 22 May 2017, 07:55 PM

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.

0
Doug
Top achievements
Rank 1
answered on 22 May 2017, 09:04 PM

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());
 
    }
};
0
Doug
Top achievements
Rank 1
answered on 23 May 2017, 04:22 PM
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) {
0
Doug
Top achievements
Rank 1
answered on 23 May 2017, 06:54 PM

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;
    }
0
Doug
Top achievements
Rank 1
answered on 06 Jun 2017, 01:55 PM
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++) {
Tags
Scheduler
Asked by
Doug
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Doug
Top achievements
Rank 1
Share this question
or