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

Configuring UI of Tootip

7 Answers 91 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Tamanna
Top achievements
Rank 1
Tamanna asked on 21 Feb 2012, 11:44 AM
Hi ,

I need a tooltip to be displayed when I hover mouse over LinkButton.
The tooltip required should have blue border and we need to change font color and size as well.

I have tried using :

<style type="text/css">
    .style1
        {
            color:Red !important;
            border:Blue;
        }
    </style>

And :

<form id="form1" runat="server">
    <rad:RadScriptManager runat="server"></rad:RadScriptManager>
     <div>
                  
        <asp:LinkButton ID="LinkButton1" runat="server" Text="Welcome"></asp:LinkButton>
          
        <rad:RadToolTip ID="Tooltip1" runat="server" Text="Hello Everyone" Enabled="true" CssClass="style1" 
            Font-Size="Medium" TargetControlID="LinkButton1" RelativeTo="Element" Position="BottomCenter" AutoCloseDelay="2000" 
            ShowEvent="OnMouseOver" EnableTheming="true" EnableEmbeddedSkins="true"></rad:RadToolTip>
              
    </div>
    </form>

But the styles are not effecting the Tooltip .
Not sure for the solution ,I also tried using codebehind and using a separate stylesheet. But it didn't help.

Please provide me a solution for implementing this.

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 21 Feb 2012, 01:37 PM
Hello,

Try the following css.
CSS:
<style type="text/css">
 div.RadToolTip_Default table.rtWrapper td.rtWrapperContent
  {
    color: red !important;
    font-size: x-large !important;
    border:1px solid red !important;
  }
</style>

Thanks,
Princy.
0
Tamanna
Top achievements
Rank 1
answered on 21 Feb 2012, 03:19 PM

Hello ,

Yes the border part is coming :) Thank you...

But still I am not able to change the font type , size and color...

Please solve this problem also....

Regards.
0
Princy
Top achievements
Rank 1
answered on 22 Feb 2012, 05:17 AM
Hello,

You should override the default CSS to change the font size. There is no need to give CSS class for the tooltip.

Thanks,
Princy.
0
Tamanna
Top achievements
Rank 1
answered on 22 Feb 2012, 06:49 AM
I am using following code :

CSS
<style type="text/css">
         div.radtooltip_Default table.rtWrapper td.rtWrapperContent
          {
            color: red !important;
            font-size: x-large !important;
            border:1px solid red !important;
          }
    </style>

<
rad:RadToolTip ID="Tooltip1" runat="server" Text="Hello Everyone" Enabled="true" 
            TargetControlID="LinkButton1" RelativeTo="Element" Position="BottomCenter" AutoCloseDelay="2000" 
            ShowEvent="OnMouseOver"></rad:RadToolTip>


But it is not working . Even border is not coming .

But when I am using :
<style type="text/css">
         div.radtooltip_Default
          {
            border:1px solid red !important;
          }
</style>
(for CSS) ,then the border is working perfectly fine .

I tried using "table.rtWrapper" and "td.rtWrapperContent" also separately like "div.radtooltip_Default" .
But it didnt work .

Please provide me a solution.
0
Accepted
Svetlina Anati
Telerik team
answered on 23 Feb 2012, 10:36 AM
Hi Tamanna,

 In general CSS is not case sensitive but there might be unexpected behavior when casing is not correct, depending on the exact browser and the DOCTYPE declaration used.

I changed your first style to use the correct casing and the second one to div.RadTooltip instead of div.radtooltip, I cleared the browser cache and your styles were applied. Please, clear your browser cache, test the demo page I attached and let us know whether the styles are applied on your side there too.

All the best,
Svetlina Anati
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tamanna
Top achievements
Rank 1
answered on 23 Feb 2012, 02:34 PM
Hi ,

Thank u so much for the answer.
I dnt know why but its nt wrkng on my system.

Mine is 2008 version . I dont know wats d problem but only border is coming and that too when I am using :

div.radtooltip_Default

{

 

border: 1px solid red !important;

 

}


If I am changing "r" as "R" ,its not working . Its showing case sensitive nature .

Please help me.
Regards .
0
Accepted
rdmptn
Top achievements
Rank 1
answered on 28 Feb 2012, 04:39 PM

Hi, Tamanna

If you got it working with a small "r" then you can simply keep using it that way :)

I'd personally advise you to upgrade to the latest RadContros version. Four years of development would have added a lot of features and fixes to the suite.

I also see the suggestion from the admin that you should check your doctype and HTML validity as well. I'd plus one this.

Also, when trying to override default CSS the easiest way it so simply inspect the rendered controls in firebug and modify the styles as needed there. Then you can simply copy the selector and add your properties to it in the page's markup. Much faster than waiting on  the community to help you out with a few lines of code.

Tags
ToolTip
Asked by
Tamanna
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Tamanna
Top achievements
Rank 1
Svetlina Anati
Telerik team
rdmptn
Top achievements
Rank 1
Share this question
or