Tooltip bgcolor

17 posts, 1 answers
  1. sam
    sam avatar
    52 posts
    Member since:
    Feb 2008

    Posted 21 Jul 2010 Link to this post

    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>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Jul 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sam
    sam avatar
    52 posts
    Member since:
    Feb 2008

    Posted 21 Jul 2010 Link to this post

    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
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Jul 2010 Link to this post

    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
  6. sam
    sam avatar
    52 posts
    Member since:
    Feb 2008

    Posted 23 Jul 2010 Link to this post

    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
  7. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 26 Jul 2010 Link to this post

    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
  8. sam
    sam avatar
    52 posts
    Member since:
    Feb 2008

    Posted 26 Jul 2010 Link to this post

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


    Thanks anyway   
  9. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 27 Jul 2010 Link to this post

    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
  10. sam
    sam avatar
    52 posts
    Member since:
    Feb 2008

    Posted 27 Jul 2010 Link to this post

    Thanks man ...)
    You really helped me


    Best Regards
    Sam

  11. H. Baris
    H. Baris avatar
    7 posts
    Member since:
    Feb 2011

    Posted 06 May 2011 Link to this post

    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.
  12. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 09 May 2011 Link to this post

    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.

  13. Francis Frank
    Francis Frank avatar
    35 posts
    Member since:
    Mar 2010

    Posted 19 Jan 2012 Link to this post

    Please how do i apply the CSS to a single div

    Thanks
  14. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 20 Jan 2012 Link to this post

    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
  15. Francis Frank
    Francis Frank avatar
    35 posts
    Member since:
    Mar 2010

    Posted 20 Jan 2012 Link to this post

    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

  16. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 23 Jan 2012 Link to this post

    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
  17. Francis Frank
    Francis Frank avatar
    35 posts
    Member since:
    Mar 2010

    Posted 23 Jan 2012 Link to this post

    <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

  18. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 23 Jan 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017