Tooltip bgcolor

[sam]

hello i need to change the background color of my rad tooltip can anyone helps me please
i tried to put the name of the color insite the property but it didn t work

here is my code
ItemTemplate >
                <asp:HyperLink ID="HyperLink1" runat="server" Width="10px" Height="50px"
                   >
                   <asp:Image ID="Image2" runat="server" Width="90px" Height="120px" ImageUrl='<%# Eval("imgFile") %>'  ToolTip="Show album"    RelativeTo="Element" Position="MiddleRight" EnableShadow="true"/> </asp:HyperLink>
                <telerik:RadToolTip ID="RadToolTip3" runat="server" TargetControlID="image2"
                    Animation="Slide" BackColor="Red"  Position="MiddleRight">
                </telerik:RadToolTip>
            </ItemTemplate>

[Shinu]

Hello Sam,


Give a try with adding following CSS on page in order to change the background color of ToolTip.

Style:

<style type="text/css">
    div.RadToolTip_Default table.rtWrapper td.rtWrapperContent
    {
        background-color: Red !important;
    }
</style>

-Shinu.

[sam]

Man i was trying stylebuilder.telerik.com to generate the skin
also  i tried your code but it didn t work      
      <telerik:RadToolTip ID="RadToolTip3" runat="server" TargetControlID="image2"
                    Animation="Slide" BackColor="Red"  Position="MiddleRight" CssClass="RadToolTip_Default">
                </telerik:RadToolTip>


what do you suggest?
thanks in return

[Svetlina Anati]

Hi sam,

I tested the code Shinu provided since it seems to be correct and indeed it worked fine on my side. The only thing I can assume that might cause this not to work is that you are using a very old version of RadControls - the CSS selectors were different in old releases. Would you please provide more detailed about the exact version you are using?

Regards,
Svetlina
the Telerik team

[sam]

hi Svetlina ,
 i am using rad controls.2008.Q3
do you think the code Shinu provided  will work in my case?
if no what do you suggest for me?
thank you very much

[Bozhidar]

Hello Sam,

In version 2008 Q3, the RadWindow CSS selectors are different than the newer versions.
In order the CSS to work and to change the background color of RadWidnow content, you should use the following selectors in the head section of your document:

<style type="text/css">
 div.radwindow_Default .windowcontent
  {
    background-color: Blue !important;
  }
</style>

Please note, that the selecotr will work for the Default skin only and you should change it if you want to use another Telerik skin.

All the best,
Bojo
the Telerik team

[sam]

Bojo my friend
No chance (
i tried your snippet but didn t work
and by the way i am using rad  tooltip


Thanks anyway   

[Bozhidar]

Hello Sam,

I apologize for the misunderstanding, please find the following CSS selectors, that you could put in the head section of your document in order to change the ToolTip background color:

<style type="text/css">
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipTopLeft,
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipTopCenter,
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipTopRight,
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipLeftMiddle,
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipContent,
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipRightMiddle,
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipBottomLeft,
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipBottomCenter,
 div.radtooltip_Default table.ToolTipWrapper td.ToolTipBottomRight
  {
   background-color: Lime !important;
  }
</style>

It works as you could see form the attached tooltipbgr2008q3.gif. Of course, you can not change the color of the callout, as it is used background image. If you want to change it, you should create a new sprite image, where the callouts will be with changed color.

Kind regards,
Bojo
the Telerik team

[sam]

Thanks man ...)
You really helped me


Best Regards
Sam

[H. Baris]

How to make this: "If you want to change it, you should create a new sprite image, where the callouts will be with changed color. "

Any link to a resource is sufficient.

[Bozhidar]

Hello,

You could follow: How to Create ToolTip Custom Skin tutorial. Another option is to use Telerik Visual Style Builder. You could find useful Meet the Visual Style Builder that gives the steps to use it, there is also a video tutorial to make things more clear.

Kind regards,
Bojo
the Telerik team

[Francis Frank]

Please how do i apply the CSS to a single div

Thanks

[Bozhidar]

Hi,

What do you mean to apply a CSS to a single div? What div, an external div that i so not part of Telerik controls or a div that is part of the tooltip?

The easiest way is to use inline style:

<div style="border: 1px solid red; height: 20px; width: 100px;">content</div>

Or to set class in an external CSS file or in the head part of the document:

.myClass {border: 1px solid red; height: 20px; width: 100px;}

 
and then to apply that class to a div tag:

<div class="myClass">content</div>

Regards,
Bozhidar
the Telerik team

[Francis Frank]

Thanks Bozhidar

I mean the CSS you provided earlier:

div.radtooltip_Default table.ToolTipWrapper td.ToolTipTopLeft,
div.radtooltip_Default table.ToolTipWrapper td.ToolTipTopCenter,
div.radtooltip_Default table.ToolTipWrapper td.ToolTipTopRight,
div.radtooltip_Default table.ToolTipWrapper td.ToolTipLeftMiddle,
div.radtooltip_Default table.ToolTipWrapper td.ToolTipContent,
div.radtooltip_Default table.ToolTipWrapper td.ToolTipRightMiddle,
div.radtooltip_Default table.ToolTipWrapper td.ToolTipBottomLeft,
div.radtooltip_Default table.ToolTipWrapper td.ToolTipBottomCenter,
div.radtooltip_Default table.ToolTipWrapper td.ToolTipBottomRight
{
background-color: Lime !important;
}

how do i apply it to a div around a tooltip or the tooltip itself

Thanks

[Bozhidar]

Hi,

The tooltip is shown on the page as a popup. You actually do not have a div around the tooltip to apply any color to it.. Send us an image of what you want to achieve,

Kind regards,
Bozhidar
the Telerik team

[Francis Frank]

<telerik:RadToolTip runat="server" ID="RadToolTip3" Position="MiddleRight"
Width="120px" Animation="Fade" ShowEvent="OnClick" ShowDelay="0" HideEvent="ManualClose"
RelativeTo="Element" TargetControlID="txtSearch" Skin="Black">

<telerik:RadListBox ID="RadListBox2" runat="server" CheckBoxes="true"
>
<Items>
<telerik:RadListBoxItem Text="All" />
<telerik:RadListBoxItem Text="Supreme" />
<telerik:RadListBoxItem Text="Appeal" />
<telerik:RadListBoxItem Text="Tax" />
</Items>
</telerik:RadListBox>

</telerik:RadToolTip>

How do i change the background of this tooltip

[Bozhidar]

Hello,

The code provided in the beginning is for RadControls 2008 Q3, since then the rendering and CSS classes were changed. As you have a listbox in the tooltip, you should change the ListBox background in order to apply any change:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        div.RadListBox_Default .rlbGroup
        {
            background: red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin-top: 50px;">
        <br />
        <br />
        <br />
        <br />
        <asp:ScriptManager ID="sm1" runat="server" />
        <asp:Button ID="btnStatus" runat="server" Text="Open toolTip" />
        <telerik:RadToolTip runat="server" ID="RadToolTip3" Position="MiddleRight" Width="120px"
            Animation="Fade" ShowEvent="OnClick" ShowDelay="0" HideEvent="ManualClose" RelativeTo="Element"
            TargetControlID="btnStatus" Skin="Black">
            <telerik:RadListBox ID="RadListBox2" runat="server" CheckBoxes="true">
                <Items>
                    <telerik:RadListBoxItem Text="All" />
                    <telerik:RadListBoxItem Text="Supreme" />
                    <telerik:RadListBoxItem Text="Appeal" />
                    <telerik:RadListBoxItem Text="Tax" />
                </Items>
            </telerik:RadListBox>
        </telerik:RadToolTip>
        <div class="logos">
            some logos content
        </div>
    </div>
    </form>
</body>
</html>

All the best,
Bozhidar
the Telerik team