Usercontrol + Stylesheet

[Robert Madrian]

Hallo,

I load a usercontrol (ascx) into the RadTooltip - the usercontrol loads but the stylesheet of my masterpage is not applied.

Which stylesheet is used by the Radtooltip?

How to assign my global styles?

regards

[Petya]

Hi Robert Madrian,

The styles applied to the RadToolTip can be found in Skins/[Used_skin]/ToolTip.[Used_skin].css file. Here you can read how to modify built-in skins to achieve the desired appearance. The way you have used a StyleSheet with CSS styles common for the whole page does not work because the RadToolTip's styles override those you have specified - to avoid this you should use !important in your styles, for example:

span
{
    color: Red !important;
}

Hope we have been helpful.

Greetings,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

    

[Robert Madrian]

Hello

I cannot use !important in all my styles because we have 10 very big css
files with hundrets off styles.

how to tell radtooltip not to override my styles without using !important?

regards

[Dimo]

Hello Robert,

You have not specified which tooltip skin you are using, but if I am not mistaken, the only rule, which could harm your master stylesheet is

div.radtooltip_[SKIN] table.Tooltipified td
{		
 .......
}

This is the only rule which could impose styles to the HTML elements inside its content area. All other CSS selectors control specific classnames.

So my advice is to modify the above selector to look like this:

div.radtooltip_[SKIN]  td.ToolTipTopLeft,
div.radtooltip_[SKIN]  td.ToolTipTopCenter,
div.radtooltip_[SKIN]  td.ToolTipTopRight,
div.radtooltip_[SKIN]  td.ToolTipLeftMiddle,
div.radtooltip_[SKIN]  td.ToolTipContent,
div.radtooltip_[SKIN]  td.ToolTipRightMiddle,
div.radtooltip_[SKIN]  td.ToolTipBottomLeft,
div.radtooltip_[SKIN]  td.ToolTipBottomCenter,
div.radtooltip_[SKIN]  td.ToolTipBottomRight
{
   .........
}

In this way this CSS rule will influence only the table cells which it should and no styles will propagate to the user control.

In order to achieve this, you will have to use an external modified version of the preferred skin, and not the embedded one.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Robert Madrian]

Hello

I think the table td are not the problem because we use no tables in the usercontrol we want to popup in the Radtooltip.

We do the positioning of all elements (DIV, SPAN, H2, UL, LI..) with CSS.

anyhow some (the most) CSS styles where not applied to my tags
i.e. h2, div, .. - these are all tags with a class attribut.

if i set embeddedstyle=false and no stylesheet for tooltip is present then also my styles are not applied!

regards

[Dimo]

Hello Robert,

Now I see. Judging by what you say:

"if i set embeddedstyle=false and no stylesheet for tooltip is present then also my styles are not applied!"

it is almost certain that the problem is caused by the fact that the ToolTip is not located inside the elements that you expect and as a result, the User Control cannot inherit styles from parent HTML elements. Let's imagine the following situation: you have a textbox inside the  .someOtherElement  element, which has the following styles:

.someWrapper  .someOtherElement
{
  ........
}

This textbox has an associated RadTooltip. In order to appear on top of all other elements, the tooltip has to be rendered directly in the <form> element and NOT inside .someOtherElement, as the textbox is. This is the reason that no styles will be inherited from "someOtherElement" by the ToolTip content.

One solution to this problem is to add a new CSS class to the user control inside the ToolTip and duplicate the needed styles for it, for example:

.someWrapper  .someOtherElement
.UserControlCssClass
{
  ........
}

<telerik:RadToolTip>
     <ContentTemplate>

         <div class="UserControlCssClass">
                  .... UserControl here ....
          </div>

     </ContentTemplate>
</telerik:RadToolTip>


Another solution is to add a wrapping div with the appropriate missing CSS class around the user control inside the RadToolTip, so that the user control inherits styles correctly. For example:

<telerik:RadToolTip>
     <ContentTemplate>

         <div class="someOtherElement">
                  .... UserControl here ....
          </div>

     </ContentTemplate>
</telerik:RadToolTip>

And finally, you have the option to write some new CSS code for the user control inside the ToolTip.

I hope this helps and that I am on the right track with my assumptions. If not, please explain what exactly is the situation.

All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Robert Madrian]

Hello Dimo,

There is a misunderstanding: we use not the RadTooltip but the RadTooltipManager because we have a repeater with 20 rows and in every row we want to popup a image (it works) and a preview of the details which also works but there are the problems with the styles.

I have made test: if I use a single RadTooltip the Preview is ok - the styles where assigned.

I think the problems comes with the RadTooltipManager

regards

[Dimo]

Hello Robert,

I think it will be best if you create a new support ticket and send us a sample working project, so that we can take a closer look and give you a prompt and accurate advice. A live URL might do as well. Thank you in advance.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center