how do i add padding or margin inside radtooltip

5 posts, 0 answers
  1. vincent
    vincent avatar
    61 posts
    Member since:
    Jun 2008

    Posted 15 Mar 2011 Link to this post

    the text inside the radtooltip almost touches the border. How do I add either margin inside or some padding?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Mar 2011 Link to this post

    Hello Vincent,

    You could try overriding the default CSS rule like below.
    CSS:
    <style type="text/css">
         .rtVisibleCallout
         {
             text-align:center !important;
         }
     </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Mar 2011 Link to this post

    Hi vincent,

     I suggest to use the rtWrapperContent selector, e.g as shown below:

    <style type="text/css">
     .rtWrapperContent
      {
          padding: 10px !important;
      }
       
     </style>

    Best wishes,
    Svetlina
    the Telerik team
  5. HL
    HL avatar
    55 posts
    Member since:
    Dec 2009

    Posted 13 Apr 2011 Link to this post

    Hi Svetlina :
     thanks. your solution works for my app. Can you please show me how to set up Tooltip font as well as back color? I tried to put inside the rtWrapperContent but it won't work

    Also how I can set up tooltip title? I tried to do this but failed
    tooltip1.set_title("it is title"
     or tooltip.title ="it is title"

    Thanks
    Helena
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Apr 2011 Link to this post

    Hello HL,

     This CSS selector works fine on my side - would you please add the keyword !important to provide a higher priority and test again? As to the title, you should use the set_title method. Here is sample code I prepared for you which works as you require:

    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            .rtWrapperContent
            {
                padding: 10px !important;
                background-color: Yellow !important;
                color: Red !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="mng" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
      
            function OnClientShow(tooltip1, args) {
                tooltip1.set_title("it is title");
            }
          
        </script>
        <telerik:RadToolTip ID="tooltip1" runat="server" Width="200" Height="200" HideEvent="ManualClose"
            RelativeTo="BrowserWindow" Position="Center" VisibleOnPageLoad="true" OnClientShow="OnClientShow">
            TEST CONTENT GOES HERE
        </telerik:RadToolTip>
        </form>
    </body>
    </html>
    Kind regards,
    Svetlina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

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