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

Changing Tooltip skin "Metro"

1 Answer 37 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 17 Sep 2014, 04:38 PM
Is it possible to change the style sheet for in built skin of telerik "Metro" ? I want to change the color and my close button to make it look like the following 




I am currently getting a circle around my close button and am unable to change color from blue to the color I need. 

Thanks,
Sushma.














1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 19 Sep 2014, 12:53 PM

Hello Sushma,

It seems an image didn't make it through. You can attach it instead of attempting to paste it inline.

On customizing the appearance of the control, you will find useful the following:

For your convenience I prepared a small CSS example that changes the metro classic skin basic elements to red (and the expected result is attached):

div.RadToolTip_Metro table.rtWrapper td.rtWrapperContent
{
    background: red;
}
 
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft
{
    border-top: 1px solid red;
}
 
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperLeftMiddle,
div.RadToolTip_Metro table.rtWrapper .rtWrapperRightMiddle
{
    background: red;
}
 
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomCenter,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft
{
    border-bottom: 1px solid red;
}
 
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopLeft,
div.RadToolTip_Metro table.rtWrapper .rtWrapperLeftMiddle,
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomLeft
{
    border-left: 1px solid red;
}
 
div.RadToolTip_Metro table.rtWrapper .rtWrapperBottomRight,
div.RadToolTip_Metro table.rtWrapper .rtWrapperRightMiddle,
div.RadToolTip_Metro table.rtWrapper .rtWrapperTopRight
{
    border-right: 1px solid red;
}
 
div.RadToolTip_Metro .rtWrapper a.rtCloseButton
{
    background-image: none; /* note: this will remove the X because it is part of the blue image*/
    background: red;
    border-radius: 8px;
}



Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ToolTip
Asked by
John
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or