Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > Tooltip bgcolor

• sam

  Posted on Jul 21, 2010 (permalink)

  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>

  Reply

• Shinu MVP

  Posted on Jul 21, 2010 (permalink)

  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.

  Reply


• sam

  Posted on Jul 21, 2010 (permalink)

  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

  Reply

• Svetlina Anati Svetlina Anati

  Posted on Jul 23, 2010 (permalink)

  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

  Reply

• sam

  Posted on Jul 23, 2010 (permalink)

  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

  Reply

• Bozhidar Bozhidar

  Posted on Jul 26, 2010 (permalink)

  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

  Reply

• sam

  Posted on Jul 26, 2010 (permalink)

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

  Reply

• Answer Bozhidar Bozhidar

  Posted on Jul 27, 2010 (permalink)

  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

  Attached files

  • tooltipbgr2008q3.gif

  Reply

• sam

  Posted on Jul 27, 2010 (permalink)

  Thanks man ...)
  You really helped me
  
  
  Best Regards
  Sam
  
  

  Reply

• H. Baris

  Posted on May 6, 2011 (permalink)

  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.

  Reply

• Bozhidar Bozhidar

  Posted on May 9, 2011 (permalink)

  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.

  Reply

• Francis Frank

  Posted on Jan 19, 2012 (permalink)

  Please how do i apply the CSS to a single div
  
  Thanks

  Reply

• Bozhidar Bozhidar

  Posted on Jan 20, 2012 (permalink)

  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

  Reply

• Francis Frank

  Posted on Jan 20, 2012 (permalink)

  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

  Reply

• Bozhidar Bozhidar

  Posted on Jan 23, 2012 (permalink)

  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

  Reply

• Francis Frank

  Posted on Jan 23, 2012 (permalink)

  <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

  Reply

• Bozhidar Bozhidar

  Posted on Jan 23, 2012 (permalink)

  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

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolTip > Tooltip bgcolor