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

background image for tooltip

3 Answers 73 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Allen
Top achievements
Rank 1
Allen asked on 20 Jun 2012, 01:43 PM
Does anyone know how to add a background image for the tooltip?  I'm using RadToolTipManager.  Please refer to the attached file.

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 21 Jun 2012, 10:13 AM
Hi Allen,

Try overriding the default CSS using "!important" as follows.

CSS:
<style type="text/css">
    div.RadToolTip_Default table.rtWrapper td.rtWrapperContent
    {
        background-color:none !important;
        background-imageurl("../Images/image.jpg") !important;
    }
</style>

Hope this helps.

Thanks,
Princy.
0
Allen
Top achievements
Rank 1
answered on 21 Jun 2012, 02:05 PM

The background color remains the same, noth

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/AvailabilityLinksSubMaster.master" CodeBehind="MyAvailability.aspx.vb" Inherits="MSP.MyAvailability" %>
<%@ MasterType virtualpath="~/AvailabilityLinksSubMaster.master" %>
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<%@ Register namespace="Telerik.Web.UI" tagprefix="UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">

        div.RadToolTip_Default table.rtWrapper td.rtWrapperContent
        {
            background-color:none!important;
            background-image:  url("../Images/Menu_Bkgrd_Normal.png") !important;
        }

        .style5
        {
            border-style: none;
            border-color: inherit;
            border-width: thin;
            margin: 0px;
            padding: 0px;
        }
        .style6
        {
            overflow: visible;
            margin-left: 12px;
            margin-top: 0px;
        }
        .ScreenOnly {display : none;}
    </style>
   
    <link href="App_Themes/Default/Scheduler.Macys.css" rel="stylesheet"
        type="text/css" />
    <link href="App_Themes/Default/Calendar.Macys.css" rel="stylesheet"
        type="text/css" />
   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TabContent" runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  <script type="text/javascript">

      function hideActiveToolTip() {
          var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
          if (tooltip) {
              tooltip.hide();
          }
      }

      Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
      function beginRequestHandler(sender, args) {
          var prm = Sys.WebForms.PageRequestManager.getInstance();
          if (args.get_postBackElement().id.indexOf('RadScheduler1') != -1) {
              hideActiveToolTip();
          }
      }

      function OnClientRequestStart(sender, args) {
          args.set_cancel(true);
          var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
          if (tooltip) {
              var element = tooltip.get_targetControl();
              var apt = $find("<%=RadScheduler1.ClientID %>").getAppointmentFromDomElement(element);
                    <%--
              $get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");
              $get("endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");
                    --%>
              $get("descriptionDiv").innerHTML = "double click to edit your preference";
              tooltip.set_text($get("contentContainer").innerHTML);
          }
      }

  </script>
 </telerik:RadCodeBlock>                       
 
       
    <!-- Start Header -->
<!-- End Header -->
   
                    <table cellpadding="0" cellspacing="0" class="style5" cols="1" width="100%">
                        <tr>
                            <td valign="top">
  <!-- Top Menu -->
  
  <!-- End Top Menu -->
  <!-- Start Workspace --> 
                          <div id="Workspace" align="left" class="style6">
                                    <div id="PrintViewHeader" style="display: none;">
                                        <table border="0" cellpadding="1" cellspacing="1" cols="2" width="98%">
                                            <tbody class="SiteTextSmall">
                                                <tr>
                                                    <td align="center" class="PageHeading">
                                                        Availability</td>
                                                </tr>
                                                <tr class="ScreenOnly">
                                                    <td align="left">
                                                        <span class="SiteTextboldRed">For best results, change your printer setting to
                                                        landscape. </span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
   
   

    <!-- Schedule option -->
                        <table border="0" cellpadding="1" cellspacing="1" cols="1" width="98%">
                                        <tbody class="SiteTextSmall">
                                            <tr>
                                                <td colspan="1" rowspan="1">
                                                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                                                    <telerik:RadScheduler ID="RadScheduler1" runat="server" DayEndTime="23:59:59"
                                                        RowHeight="16px" SelectedView="WeekView"
                                                        WorkDayEndTime="8.00:00:00" WorkDayStartTime="00:00:00"
                                                        AllowDelete="False"
                                                        NumberOfHoveredRows="1" SelectedDate="2012-05-23"
                                                        EnableExactTimeRendering="True" Height="460px"
                                                        EnableEmbeddedSkins="False" Skin="Macys"
                                                        onclientappointmentcontextmenu="hideActiveToolTip"
                                                        onclientappointmentdoubleclick="hideActiveToolTip"
                                                        onclientrecurrenceactiondialogshowing="hideActiveToolTip">
                                                        <AdvancedForm Width="60%" Modal="True" />
                                                        <ResourceTypes>
                                                        <telerik:ResourceType DataSourceID="SqlDataSource2" ForeignKeyField="USERID"
                                                        KeyField="ID" Name="Users" TextField="USERNAME" />
                                                        </ResourceTypes>
                                                        <TimelineView UserSelectable="False" />
                                                        <WeekView DayEndTime="23:59:59" ColumnHeaderDateFormat="dddd, d" />
                                                        <Localization AdvancedEditAppointment="Edit" AdvancedNewAppointment="New" />
                                                    </telerik:RadScheduler>
                                                               
                                                    <asp:SqlDataSource
                                                        ID="SqlDataSource1" runat="server"
                                                        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                                                        DeleteCommand="DELETE FROM &quot;AVAILABILITY_TEST&quot; WHERE &quot;ID&quot; = :ID"
                                                        InsertCommand="INSERT INTO &quot;AVAILABILITY_TEST&quot; (&quot;ID&quot;, &quot;SUBJECT&quot;, &quot;START_TIME&quot;, &quot;END_TIME&quot;, &quot;USERID&quot;, &quot;RECURRENCERULE&quot;, &quot;RECURRENCEPARENTID&quot;) VALUES (:ID, :SUBJECT, :START_TIME, :END_TIME, :USERID, :RECURRENCERULE, :RECURRENCEPARENTID)"
                                                        ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"
                                                        SelectCommand="SELECT * FROM &quot;AVAILABILITY_TEST&quot;"
                                                        UpdateCommand="UPDATE &quot;AVAILABILITY_TEST&quot; SET &quot;SUBJECT&quot; = :SUBJECT, &quot;START_TIME&quot; = :START_TIME, &quot;END_TIME&quot; = :END_TIME, &quot;USERID&quot; = :USERID, &quot;RECURRENCERULE&quot; = :RECURRENCERULE, &quot;RECURRENCEPARENTID&quot; = :RECURRENCEPARENTID WHERE &quot;ID&quot; = :ID">
                                                        <DeleteParameters>
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                        </DeleteParameters>
                                                        <InsertParameters>
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                            <asp:Parameter Name="SUBJECT" Type="String" />
                                                            <asp:Parameter Name="START_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="END_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="USERID" Type="Decimal" />
                                                            <asp:Parameter Name="RECURRENCERULE" Type="String" />
                                                            <asp:Parameter Name="RECURRENCEPARENTID" Type="Decimal" />
                                                        </InsertParameters>
                                                        <UpdateParameters>
                                                            <asp:Parameter Name="SUBJECT" Type="String" />
                                                            <asp:Parameter Name="START_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="END_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="USERID" Type="Decimal" />
                                                            <asp:Parameter Name="RECURRENCERULE" Type="String" />
                                                            <asp:Parameter Name="RECURRENCEPARENTID" Type="Decimal" />
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                        </UpdateParameters>
                                                    </asp:SqlDataSource><asp:SqlDataSource
                                                        ID="SqlDataSource2" runat="server"
                                                        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                                                        ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"
                                                        SelectCommand="SELECT &quot;ID&quot;, &quot;USERNAME&quot; FROM &quot;AVAILABILITY_TEST_USERS&quot;">
                                                    </asp:SqlDataSource>
                                                   
                    
                                                    <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="130" Height="40"
                                                        Animation="None" HideEvent="LeaveToolTip" Text="Loading..." OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" />
                                                    <div style="display: none;">
                                                        <div id="contentContainer">
                                                        <%--
                                                            Starts on: <span id="startTime"></span>
                                                            <br />
                                                            Ends on: <span id="endTime"></span>
                                                            <hr />
                   
                                                            Description:
                                                        --%>
                                                            <div id="descriptionDiv">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    </telerik:RadAjaxPanel>
                                                  </td>
                                            </tr>
                                           
                                        </tbody>
                                    </table>
    
    <!-- Permanent availability -->
                       
                                </div>
                            </td>
                        </tr>
                    </table>
  <!-- End Workspace -->    
 
</asp:Content>

ing has changed.   Here is my code:

0
Marin Bratanov
Telerik team
answered on 22 Jun 2012, 12:41 PM
Hello Allen,

It seems that you are using the Sunset skin which is why the cascade provided by Princy is not working for you - it relies on the tooltips using the Default skin. I am attaching here a short video that shows this behavior. What you can do to avoid this - remove the skin name from the CSS rule:
div.RadToolTip table.rtWrapper td.rtWrapperContent
{
    background-color: none !important;
}



Greetings,
Marin Bratanov
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
Scheduler
Asked by
Allen
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Allen
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or