Disable telerik styling for Tooltip close button

2 posts, 0 answers
  1. Will
    Will avatar
    4 posts
    Member since:
    May 2011

    Posted 20 Sep 2011 Link to this post

    I would like to know how to disable the telerik styling for the tooltip close button.

    I have set the EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Skin="4Cast" but it still renders the telerik styling and because the styling is so specific it supersedes my syles.
    This is the tooltip source...
    <telerik:RadToolTip runat="server" ID="RadToolTip3" HideEvent="FromCode"
    Position="BottomCenter" Animation="slide" CssClass="freeTrialWindow"
    ShowEvent="OnClick" ShowDelay="0" RelativeTo="Element" TargetControlID="freeTrialHL"
    EnableShadow="true" ManualClose="true" Width="200" Height="200"
    EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Skin="4Cast"
    RenderInPageRoot="true" ShowCallout="true" Title="Sign up for a free trial" >

    The css for the tooltip is...
    .RadToolTip_4Cast a.rtCloseButton,
    .RadToolTip_4Cast a.rtCloseButton:hover {
        background: url("button/tooltipClose.png") no-repeat center center transparent;
    }
     
    div.RadToolTip_4Cast table.rtShadow a.rtCloseButton {
        margin: -10px -10px 0 0;
        position: absolute;
        right: 0;
        top: 0;
        background-position: 0 0;
        width: 19px;
        height: 19px;
    }
     
    .RadToolTip_4Cast a.rtCloseButton:hover {
        background-position: 0 -20px;
    }

    The main part of the css that i want rendered is the negative margin. This will then display the button in the top right corner slightly out of the box.
    The css that gets rendered is this...
    div.RadToolTip a.rtCloseButton {
      background-position: 0 0;
      background-repeat: no-repeat;
      display: block;
      float: right;
      font-size: 1px;
      height: 12px;
      line-height: 1px;
      margin-right: 3px;
      margin-top: 3px;
      outline: medium none;
      position: absolute;
      right: 1px;
      text-indent: -9999px;
      width: 12px;
    }

    And that is the telerik css that is superseding my css.
    I dont want to use the !important class modifier and i dont want to make my css so specific that i will never be able to supersede it for something else.

    I would just like to disable the predefined styles that telerik puts in. I thought thats what the EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Skin="4Cast"
    functions were meant to do?

    Thanks in advance for your help.
  2. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 21 Sep 2011 Link to this post

    Hi Will,

    Actually you should not make so many CSS overrides and to disable the base stylesheet of the control.

    Attached is a small project showing how to style your close button and to put it wherever you want it with just a few CSS:

    .rtWrapperTopCenter
            {
                position: relative;
            }
             
            div.RadToolTip td.rtWrapperTopCenter a.rtCloseButton
            {
                position: absolute;
                top: -18px;
                right: -16px;
                background-image: url(fancyboxClose.png);
                background-position: 0 0;
                width: 30px;
                height: 30px;
            }

    Click on the white rectangle you will get the result shown at the attached tooltipCloseButton.gif.

    Kind regards,
    Bozhidar
    the Telerik team
    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 their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top