Configuring UI of Tootip

[Tamanna]

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.

[Princy]

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.

[Tamanna]

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.

[Princy]

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.

[Tamanna]

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.

[Svetlina Anati]

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

[Tamanna]

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 .

[rdmptn]

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.