3 Answers, 1 is accepted
Rank 2
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-image: url("../Images/image.jpg") !important; }</style>Hope this helps.
Thanks,
Princy.
Rank 1
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 "AVAILABILITY_TEST" WHERE "ID" = :ID"
InsertCommand="INSERT INTO "AVAILABILITY_TEST" ("ID", "SUBJECT", "START_TIME", "END_TIME", "USERID", "RECURRENCERULE", "RECURRENCEPARENTID") VALUES (:ID, :SUBJECT, :START_TIME, :END_TIME, :USERID, :RECURRENCERULE, :RECURRENCEPARENTID)"
ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"
SelectCommand="SELECT * FROM "AVAILABILITY_TEST""
UpdateCommand="UPDATE "AVAILABILITY_TEST" SET "SUBJECT" = :SUBJECT, "START_TIME" = :START_TIME, "END_TIME" = :END_TIME, "USERID" = :USERID, "RECURRENCERULE" = :RECURRENCERULE, "RECURRENCEPARENTID" = :RECURRENCEPARENTID WHERE "ID" = :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 "ID", "USERNAME" FROM "AVAILABILITY_TEST_USERS"">
</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:
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; background-image: url("http://blog.reflexstock.com/wp-content/uploads/2009/11//colorful_desktop_candy_by_alsnd12.jpg"
) !important; }Greetings,
Marin Bratanov
the Telerik team