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

Radtooltip padding

2 Answers 78 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
arnaud
Top achievements
Rank 1
arnaud asked on 20 Jan 2009, 05:51 PM
Hi,

Using a custom skin for a tooltip based on the 'Vista' skin, where is the place to modify the tooltip text padding inside the skin file (I want the text not so close to the tooltips borders, like the 'Default' skin for example). ?

/* r.a.d.tooltip VISTA skin */ 
 
/* r.a.d.tooltip resize element */ 
div.radtooltip_MySkin.ResizeElement 
    border: solid 1px #d3fd2c; 
    background: #f8fce0; 
 
div.radtooltip_MySkin.LoadingSign 
{    
    background: url(ToolTip/Loading.gif)  no-repeat center; 
    width: 100%; height: 100%; 
 
div.radtooltip_MySkin 
    position: absolute; 
    cursor: default; 
 
div.radtooltip_MySkin div.ToolTipCallout 
    display:none; 
 
div.radtooltip_MySkin.visiblecallout 
    /**/ 
 
div.radtooltip_MySkin.visiblecallout div.ToolTipCallout 
    display: block; 
 
 
div.radtooltip_MySkin table.ToolTipWrapper 
    padding: 0; margin: 0; 
    border-collapse: collapse; 
 
div.radtooltip_MySkin table.ToolTipWrapper td 
{        
    padding: 0; margin: 0; 
    border-collapse: collapse; 
    /*text-align:left;*//*RTL support*/ 
 
/* -------------------------- CORNER SETTINGS BEGIN ---------------------------------- */ 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopLeft, 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopRight, 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomLeft, 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomRight 
    width: 3px; height: 4px;  
    line-height: 0px; font-size: 1px; 
    background-image: url(ToolTip/ToolTipCorners.gif) ; 
    background-repeat: no-repeat; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopLeft 
    background-position: 0 0; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopRight 
    background-position: right 0; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomLeft 
    background-position: 0 bottom; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomRight 
    background-position: right bottom; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopCenter, 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomCenter 
    height: 3px;  
    line-height: 0px; font-size: 1px; 
    background: url(ToolTip/ToolTipTopParts.gif) ; 
    background-repeat: repeat-x; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopCenter 
    background-position: 0 0; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomCenter 
    background-position: 0 bottom; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipLeftMiddle, 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipRightMiddle 
    background-image:  url(ToolTip/ToolTipSideParts.gif); 
    background-repeat: repeat-y; 
    font-size: 1px; 
    width: 3px; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipLeftMiddle 
    background-position: 0 0; 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipRightMiddle 
    background-position: right 0; 
/* -------------------------- CORNER SETTINGS END ---------------------------------- */ 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipContent 
    font: 12px Arial, Helvetica, sans-serif; 
    height: 100%; 
    background: #e4e5f0  url(ToolTip/ContentBgr.gif) repeat-x; 
    padding: 4px; 
    color: #ea0a8b; 
 
div.radtooltip_MySkin div.ToolTipTitlebar 
{    
    color: #272397; 
    font: normal 18px "Segoe UI", "Trebuchet MS", Arial, Verdana, Sans-serif; 
    float:left; 
    line-height: 22px; 
    padding: 4px; 
 
/* close button */ 
div.radtooltip_MySkin a.CloseButton, 
div.radtooltip_MySkin a.CloseButton:hover 
    display: block; float: right; 
    position:absolute; 
    right: 2px; 
    width: 28px; height: 15px; 
    font-size: 1px; line-height: 1px; 
    margin-top: 3px; 
    margin-right: 1px; 
    background: url(ToolTip/close.gif)  no-repeat; 
    text-indent: -9999px; 
    outline: none; 
 
/* RTL */ 
div.radtooltip_MySkin_rtl a.CloseButton, 
div.radtooltip_MySkin_rtl a.CloseButton:hover 
    float: left !important; 
    text-decoration: none !important; 
    outline: none; 
    left: 2px; 
    margin-left: 1px; 
    right: auto; 
    margin-right: auto; 
 
div.radtooltip_MySkin_rtl div.ToolTipTitlebar, 
div.radtooltip_MySkin_rtl table.ToolTipWrapper td.ToolTipTopCenter div.ToolTipTitlebar div 
    float: right !important; 
 
/* position="Center" */ 
div.radtooltip_MySkin_rtl .Center 
    right: 0; 
    left: auto; 
 
/* position="BottomRight" */ 
.radtooltip_MySkin_rtl .TopLeft 
    margin-right: -20px; 
 
/* position="BottomCenter" */ 
.radtooltip_MySkin_rtl .TopCenter 
    margin-right: 10px; 
 
/* position="BottomLeft" */ 
.radtooltip_MySkin_rtl .TopRight 
    margin-right: 20px; 
 
/* position="TopCenter" */ 
.radtooltip_MySkin_rtl .BottomCenter 
    margin-right: 10px !important; 
 
/* position="TopLeft" */ 
.radtooltip_MySkin_rtl .BottomRight 
    margin-right: 40px !important; 
 
/* position="TopRight" */ 
.radtooltip_MySkin_rtl .BottomLeft 
    margin-right: -20px !important; 
 
/* position="MiddleRight" */ 
.radtooltip_MySkin_rtl .MiddleLeft 
    margin-right: 10px; 
 
/* position="MiddleLeft" */ 
.radtooltip_MySkin_rtl .MiddleRight 
    margin-right: 1px; 
/* RTL END */ 
 
/* --------------------------------------------- TOOLTIP CALLOUT SETTINGS BEGIN --------------------------------------------- */ 
div.radtooltip_MySkin div.ToolTipCallout 
    position: absolute; top: 0; left: 0; 
    height: 11px; width: 11px; 
    line-height: 0px; font-size: 1px; 
    background-image: url(ToolTip/Callouts.gif); 
    background-repeat: no-repeat; 
 
/* position="Center" */ 
div.radtooltip_MySkin .Center 
    background: none !important; 
 
/* position="BottomRight" */ 
.radtooltip_MySkin .TopLeft 
    margin-top: -10px; margin-left: 20px; 
    background-position: 0 -22px; 
 
/* position="BottomCenter" */ 
.radtooltip_MySkin .TopCenter 
    left: 50% !important; 
    margin-top: -9px; margin-left: -10px; 
    background-position: 0 0 !important; 
 
/* position="BottomLeft" */ 
.radtooltip_MySkin .TopRight 
    left: 100% !important; 
    margin-top: -10px; margin-left: -20px; 
    background-position: 0 -11px !important; 
 
/* position="TopCenter" */ 
.radtooltip_MySkin .BottomCenter 
    top: 100% !important; left: 50% !important; 
    margin-left: -10px !important; margin-top: -1px !important; 
    width: 100% !important; 
    background-position: 0 -55px !important; 
 
/* position="TopLeft" */ 
.radtooltip_MySkin .BottomRight 
    top: 100% !important; left: 100% !important; 
    margin-left: -40px !important; margin-top: -1px !important; 
    background-position: 0 -66px !important; 
 
/* position="TopRight" */ 
.radtooltip_MySkin .BottomLeft 
    top: 100% !important; 
    margin-left: 20px !important; margin-top: -1px !important; 
    background-position: 0 -77px !important; 
 
/* position="MiddleRight" */ 
.radtooltip_MySkin .MiddleLeft 
    top: 50% !important; 
    margin-left: -10px; margin-top: -7px; 
    background-position: 0 -44px !important; 
 
/* position="MiddleLeft" */ 
.radtooltip_MySkin .MiddleRight 
    left: 100% !important; top: 50% !important; 
    margin-left: -1px; margin-top: -10px; 
    background-position: 0 -33px; 
/* --------------------------------------------- TOOLTIP CALLOUT SETTINGS END --------------------------------------------- */ 
 
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopLeft,    
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopCenter,    
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipTopRight,    
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipLeftMiddle,    
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipContent,    
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipRightMiddle,    
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomLeft,    
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomCenter,    
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipBottomRight    
    padding: 0; 
    border: 0; 

2 Answers, 1 is accepted

Sort by
0
arnaud
Top achievements
Rank 1
answered on 23 Jan 2009, 07:20 AM
div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipContent
{
    padding: 5px;
}
0
Svetlina Anati
Telerik team
answered on 23 Jan 2009, 09:49 AM
Hi Arnaud,

Try including the following style in your page's head:

div.radtooltip_WebBlue table.ToolTipWrapper td.ToolTipTopLeft,     
div.radtooltip_WebBlue table.ToolTipWrapper td.ToolTipTopCenter,     
div.radtooltip_WebBlue table.ToolTipWrapper td.ToolTipTopRight,     
div.radtooltip_WebBlue table.ToolTipWrapper td.ToolTipLeftMiddle,     
div.radtooltip_WebBlue table.ToolTipWrapper td.ToolTipRightMiddle,     
div.radtooltip_WebBlue table.ToolTipWrapper td.ToolTipBottomLeft,     
div.radtooltip_WebBlue table.ToolTipWrapper td.ToolTipBottomCenter,     
div.radtooltip_WebBlue table.ToolTipWrapper td.ToolTipBottomRight     
{  
   displaynone;  

Just replace "WebBlue" with your skin name and test again. In case you need further assistance, please open a new support ticket and send us a fully runnable reproduction demo along with some screenshots.

Greetings,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
ToolTip
Asked by
arnaud
Top achievements
Rank 1
Answers by
arnaud
Top achievements
Rank 1
Svetlina Anati
Telerik team
Share this question
or