Configuring UI of Tootip

8 posts, 2 answers
  1. Tamanna
    Tamanna avatar
    7 posts
    Member since:
    Aug 2012

    Posted 21 Feb 2012 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Feb 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tamanna
    Tamanna avatar
    7 posts
    Member since:
    Aug 2012

    Posted 21 Feb 2012 Link to this post


    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Feb 2012 Link to this post

    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.
  6. Tamanna
    Tamanna avatar
    7 posts
    Member since:
    Aug 2012

    Posted 22 Feb 2012 Link to this post

    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.
  7. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Feb 2012 Link to this post

    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.
  8. Tamanna
    Tamanna avatar
    7 posts
    Member since:
    Aug 2012

    Posted 23 Feb 2012 Link to this post

    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 .
  9. Answer
    rdmptn
    rdmptn avatar
    72 posts
    Member since:
    Aug 2011

    Posted 28 Feb 2012 Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017