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

change default loading image to text

7 Answers 80 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
snowolf
Top achievements
Rank 1
snowolf asked on 03 Nov 2008, 06:07 PM
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

7 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 05 Nov 2008, 03:44 PM
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    
    {        
        backgroundurl([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.
0
snowolf
Top achievements
Rank 1
answered on 12 Nov 2008, 07:28 PM
Hi Svetlina

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

Thanks,

Ye
0
Svetlina Anati
Telerik team
answered on 13 Nov 2008, 08:59 AM
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.
0
snowolf
Top achievements
Rank 1
answered on 14 Nov 2008, 12:36 AM
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
0
Svetlina Anati
Telerik team
answered on 14 Nov 2008, 04:05 PM
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.
0
snowolf
Top achievements
Rank 1
answered on 18 Nov 2008, 03:49 PM
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
0
Svetlina Anati
Telerik team
answered on 21 Nov 2008, 01:26 PM
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.
Tags
ToolTip
Asked by
snowolf
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
snowolf
Top achievements
Rank 1
Share this question
or