Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

how do i add padding or margin inside radtooltip

4 Answers 173 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
vincent
Top achievements
Rank 1
vincent asked on 15 Mar 2011, 09:02 PM
the text inside the radtooltip almost touches the border. How do I add either margin inside or some padding?

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 16 Mar 2011, 11:05 AM
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.
0
Svetlina Anati
Telerik team
answered on 18 Mar 2011, 10:27 AM
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
Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
0
HL
Top achievements
Rank 1
answered on 14 Apr 2011, 04:11 AM
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
0
Svetlina Anati
Telerik team
answered on 19 Apr 2011, 08:39 AM
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.

Tags
ToolTip
Asked by
vincent
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Svetlina Anati
Telerik team
HL
Top achievements
Rank 1
Share this question
or