This is a migrated thread and some comments may be shown as answers.
Disable telerik styling for Tooltip close button
1 Answer 39 Views
This is a migrated thread and some comments may be shown as answers.
Will
Top achievements
Rank 1
Will asked on 20 Sep 2011, 11:06 AM
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.

1 Answer, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 21 Sep 2011, 01:45 PM
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
Asked by
Will
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or