how to show tooltip (html) onMouseOver

[Doug]

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>

[Marin Bratanov]

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

[Doug]

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.

[Doug]

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());

    }
};

[Doug]

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) {

[Doug]

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;
    }

[Doug]

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++) {