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

Styling issues on tooltip being used in a RadGrid

1 Answer 93 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
ian webster
Top achievements
Rank 1
ian webster asked on 09 Feb 2009, 03:58 PM
Hi,

I'm using a rad tool tip inside a radgrid, the resulting tooltip has some strange styling problems.

Inspecting the styles applied to the tool tip using developer tool bar in IE I see the following:

the ToolTipTopLeft, ToolTipTopCenter, ToolTipTopRight, ToolTipLeftMiddle, ToolTipRightMiddle, ToolBottomLeft, ToolTipBottomMiddle & ToolTipBottomRight elements all have their borders set to #d0d7e5 style solid, width 1px

this creates a faint box that appears inside the tool tip.

I've placed another test tooltip outside of the grid and this one does not have the strange styling problem, the html for the page in question can be found below:

<

asp:UpdatePanel ID="pnlToolTipUpdate" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">

 

 

<ContentTemplate>

 

 

<telerik:RadToolTip ID="ttpAdjustment"

 

 

Visible="false"

 

 

runat="server"

 

 

Modal="True"

 

 

ShowCallout="False"

 

 

Position="Center"

 

 

RelativeTo="BrowserWindow"

 

 

ShowEvent="FromCode"

 

 

Skin="Black"

 

 

HideEvent="FromCode">

 

 

<uc2:AddAdjustmentPopup ID="ucAddAdjustmentPopup" runat="server" Mode="Adjustment" AllowPremiumPartSelection="false" />

 

 

</telerik:RadToolTip>

 

 

</ContentTemplate>

 

</

asp:UpdatePanel>

 

<

asp:UpdatePanel ID="pnlGridUpdate" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">

 

 

<ContentTemplate>

 

 

<telerik:RadGrid ID="grdAdjustments" runat="server" AutoGenerateColumns="False" Width="80%" GridLines="None" Skin="Office2007" OnItemDataBound="grdAdjustments_ItemDataBound" OnDetailTableDataBind="grdAdjustments_DetailTableDataBind" OnNeedDataSource="grdAdjustments_NeedDataSource" OnItemCommand="grdAdjustments_ItemCommand">

 

 

<HeaderContextMenu>

 

 

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

 

</HeaderContextMenu>

 

 

<MasterTableView DataKeyNames="ID">

 

 

<DetailTables>

 

 

<telerik:GridTableView runat="server" ShowHeader="true" ShowFooter="false">

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridTemplateColumn UniqueName="AdjustmentType" HeaderText="Type">

 

 

<ItemTemplate>

 

 

<asp:Literal ID="litAdjustmentType" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="AdjustmentNet" HeaderText="Net">

 

 

<ItemTemplate>

 

 

<asp:Literal ID="litNet" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="AdjustmentIPT" HeaderText="IPT">

 

 

<ItemTemplate>

 

 

<asp:Literal ID="litIpt" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="AdjustmentGross" HeaderText="Gross">

 

 

<ItemTemplate>

 

 

<asp:Literal ID="litGross" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="Commands" HeaderText="">

 

 

<ItemTemplate>

 

 

<asp:LinkButton ID="lnkComments" runat="server" />&nbsp;

 

 

<asp:LinkButton ID="lnkRemove" runat="server" Text="Remove adjustment" CommandName="RemoveAdjustment" />

 

 

<telerik:RadToolTip ID="tipComments"

 

 

TargetControlID="lnkComments"

 

 

HideEvent="ManualClose"

 

 

Modal="false"

 

 

ShowEvent="OnMouseOver"

 

 

runat="server"

 

 

RelativeTo="Element"

 

 

ShowCallout="true"

 

 

Skin="Default"

 

 

Width="400">

 

 

<p>

 

 

<strong>

 

 

<asp:Literal ID="litCommentTitle" runat="server" /></strong></p>

 

 

<ul style="list-style-type: none;">

 

 

<li>

 

 

<asp:Literal ID="litComments" runat="server" /></li>

 

 

</ul>

 

 

</telerik:RadToolTip>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

</Columns>

 

 

</telerik:GridTableView>

 

 

</DetailTables>

 

 

<ExpandCollapseColumn Visible="True">

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridTemplateColumn UniqueName="PremiumPartName" HeaderText="Premium Part">

 

 

<ItemTemplate>

 

 

<asp:HiddenField ID="hdnPremiumPartID" runat="server" />

 

 

<asp:HiddenField ID="hdnOriginalITP" runat="server" />

 

 

<asp:HiddenField ID="hdnOriginalGross" runat="server" />

 

 

<asp:Literal ID="litPremiumPart" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="OriginalNetPremium" HeaderText="Original Net Premium">

 

 

<ItemTemplate>

 

 

<asp:Literal ID="litOriginalNetPremium" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="NetAdjustment" HeaderText="Net Adjustment">

 

 

<ItemTemplate>

 

 

<asp:Literal ID="litNetAdjustment" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="TotalIPT" HeaderText="Total IPT">

 

 

<ItemTemplate>

 

 

<asp:Literal ID="litTotalIPT" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="GrossPremium" HeaderText="Gross Premium">

 

 

<ItemTemplate>

 

 

<asp:Literal ID="litGrossPremium" runat="server" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="Commands">

 

 

<ItemTemplate>

 

 

<asp:LinkButton ID="lnkAddAdjustment" runat="server" Text="Add adjustment" CommandName="AddAdjustment" />

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

<FilterMenu>

 

 

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

 

</FilterMenu>

 

 

</telerik:RadGrid>

 

 

</ContentTemplate>

 

</

asp:UpdatePanel>

 



1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 10 Feb 2009, 03:18 PM
Hi ian webster,

You did not specify which skin are you using, so I am giving you a solution with the Office2007 skin of RadToolTip. Make sure you replace the occurrences of Office2007 with the name of the skin that you are using, and this will fix the problem. Here goes the code:

div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipTopLeft,        
div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipTopCenter,        
div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipTopRight,        
div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipLeftMiddle,        
div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipContent,        
div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipRightMiddle,        
div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipBottomLeft,        
div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipBottomCenter,        
div.radtooltip_Office2007 table.ToolTipWrapper td.ToolTipBottomRight        
{     
    padding: 0 !important;     
    border: 0 !important;     
    border-collapsecollapse !important;     
}  

Make sure you do not remove the !important flag at the end of each property value, otherwise the fix might not work.

Sincerely yours,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
ToolTip
Asked by
ian webster
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or