How to Shrink Border of RadToolTip?

3 posts, 1 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 27 Aug 2013 Link to this post

    Trying to implement RadToolTips for the first time, I don't like the thick border that appears as a default.  I've tried several things to reduce its size but with no luck.  How do I do this?

    Note: I do not use Skins with Telerik controls so would appreciate a non-Skin solution.

    Thank you,

    Robert W.
  2. Answer
    Marin Bratanov
    Marin Bratanov avatar
    4441 posts

    Posted 28 Aug 2013 Link to this post

    Hi Robert,

    If you examine the control's rendered HTML in a tool like firebug you will get a clean idea of the CSS rules that govern its appearance. I assume the thickest border you see is actually the default padding the content has (the while stripe around the yellow content). This can be removed with the following rule:
    div.RadToolTip .rtWrapper td.rtWrapperContent
        padding: 0;

    If you are looking to remove the other borders the controls has - there are several things you can do:
    - the primary one is creating a custom skin with the desired effects

    Since this is not an option, here are the other suggestions I can give:
    - set the EnableShadow property to false to remove the shadow. It will make the borders look thinner
    - switch to Lightweigh renderMode (note that this will change the above selector, but you can examine the HTML to find the corresponding classes) and override the borders with CSS3 there if you do not like their appearance

    Marin Bratanov
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 28 Aug 2013 Link to this post

    Thanks, Marin.
Back to Top