[Solved] Radtooltip padding

[arnaud]

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;
}

[arnaud]

div.radtooltip_MySkin table.ToolTipWrapper td.ToolTipContent
{
    padding: 5px;
}

[Svetlina Anati]

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
{
   display: none;
}

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.