This is a migrated thread and some comments may be shown as answers.

Tooltip bgcolor

16 Answers 147 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
sam
Top achievements
Rank 1
sam asked on 21 Jul 2010, 10:47 AM
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>

16 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 21 Jul 2010, 02:28 PM
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.
0
sam
Top achievements
Rank 1
answered on 21 Jul 2010, 06:20 PM
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
0
Svetlina Anati
Telerik team
answered on 23 Jul 2010, 03:36 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
sam
Top achievements
Rank 1
answered on 23 Jul 2010, 06:11 PM
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
0
Bozhidar
Telerik team
answered on 26 Jul 2010, 04:35 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
sam
Top achievements
Rank 1
answered on 26 Jul 2010, 05:16 PM
Bojo my friend
No chance (
i tried your snippet but didn t work
and by the way i am using rad  tooltip


Thanks anyway   
0
Accepted
Bozhidar
Telerik team
answered on 27 Jul 2010, 07:24 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
sam
Top achievements
Rank 1
answered on 27 Jul 2010, 07:52 AM
Thanks man ...)
You really helped me


Best Regards
Sam

0
H. Baris
Top achievements
Rank 1
answered on 06 May 2011, 07:21 PM
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.
0
Bozhidar
Telerik team
answered on 09 May 2011, 07:37 AM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Francis Frank
Top achievements
Rank 1
answered on 19 Jan 2012, 05:32 PM
Please how do i apply the CSS to a single div

Thanks
0
Bozhidar
Telerik team
answered on 20 Jan 2012, 08:32 AM
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
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
0
Francis Frank
Top achievements
Rank 1
answered on 20 Jan 2012, 10:30 AM

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

0
Bozhidar
Telerik team
answered on 23 Jan 2012, 11:35 AM
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
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
0
Francis Frank
Top achievements
Rank 1
answered on 23 Jan 2012, 03:02 PM
<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

0
Bozhidar
Telerik team
answered on 23 Jan 2012, 03:12 PM
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">
<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
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
Tags
ToolTip
Asked by
sam
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
sam
Top achievements
Rank 1
Svetlina Anati
Telerik team
Bozhidar
Telerik team
H. Baris
Top achievements
Rank 1
Francis Frank
Top achievements
Rank 1
Share this question
or