change default loading image to text

[snowolf]

I have a TooltipManager on the page, and its skin is Vista.
It display a default loading image when it requests content of tooltip from server.

I want to change this image to text like "Loading...".

How can I do that?

Thanks,

-s

[Svetlina Anati]

Hello Snowolf,

The easiest way to achieve the desired behavior is to create an image which contains the desired text and override the default image to make the RadToolTip show the new image instead. In order to achieve this you should use the following CSS:

 div.radtooltip_[Your_Skin_Name] .ToolTipContent div.LoadingSign
    {
        background: url([new image url here]) no-repeat center !important;
        width: 100%;
        height: 100%;
        margin: -15px;
    }

For your convenience I prepared and attached a sample demo which uses the Default skin - you can find it in the attached archive file.

The same effect can be achieved with text instead of an image by using javascript but this manner is much more complicated because the div does not have an ID. Let me know if you prefer this approach.

Kind regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[snowolf]

Hi Svetlina

Thanks for your reply.
But I can not find your attached demo.

Thanks,

Ye

[Svetlina Anati]

Hi Snowolf,

It seems that for some reason the attachment could not make through. However, I wrote a KB article about your request and it has two alternative solutions of the problem explained and working demos attached. You can find it here, let me know if you need further assistance.

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[snowolf]

Hi Svetlina,

The css works great but I tried the Js and it seems like doesn't work.
Anyway, the css is enough to me.

Thanks a lot.

-s

[Svetlina Anati]

Hello Snowolf,

I downloaded and tested again the JavaScript solution and it worked as expected on my side. Would you please let me know whether the solution was not successfully integrated in your project only or the sample project also did not work as expected?

I am glad you managed to get it to work. In case you want to investigate further what is the issue with the JavaScript code and to use it instead of the CSS, provide more information on the problem.

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[snowolf]

It displays default loading image first, then displays custom red text, and then display tooltip content.

this is what I set to tooltipmanager.

            this.Animation = ToolTipAnimation.Fade;
            this.AutoTooltipify = false;
            this.Skin = "Vista";
            this.OnClientBeforeShow = "clientBeforeShow";
            this.ShowDelay = 1000;
            this.ManualClose = false;
            this.MouseTrailing = false;
            this.ShowEvent = ToolTipShowEvent.OnMouseOver;
            this.RelativeTo = ToolTipRelativeDisplay.Mouse;
            this.OffsetX = 4;
            this.Sticky = false;
            this.HideDelay = 0;
            this.AutoCloseDelay = 10000000;
            this.Width = new Unit(200);
            this.Position = ToolTipPosition.TopCenter;

-s

[Svetlina Anati]

Hi snowolf,

I tested the provided project and I was able to reproduce the described behavior. However, it comes from the fact that you are using an animation - if you remove the Animation setting, it will work as expected. I recommend to use the CSS approach if you want to keep the animation or the javascript one if in your case it is more important not to use an image but a plain text - you should decide what is the best approach for your particular case.

Regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.