Hey,
The following code breaks tooltip positioning. This is due to setting 2 properties of the mainContainer:
margin: 0 auto (this centers it on screen)
and
position:relative (sometimes needed to be explicitly defined for abs. pos. of child elements)
if you remove pos:rel it works fine:
The following code breaks tooltip positioning. This is due to setting 2 properties of the mainContainer:
margin: 0 auto (this centers it on screen)
and
position:relative (sometimes needed to be explicitly defined for abs. pos. of child elements)
if you remove pos:rel it works fine:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Telerik Testing</title>
<style type="text/css">
body
{
background: gray;
}
#mainContainer
{
margin: 0 auto;
width: 600px;
background: #fff;
height: 400px;
padding: 10px;
position: relative;
}
#content
{
float: left;
width: 200px;
height: 300px;
border: 2px dotted green;
}
#content {
margin:10px;
padding:3px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="rsm" runat="server">
</telerik:RadScriptManager>
<div id="mainContainer">
<h1>
Telerik Tooltip Test with margin 0 auto</h1>
<div id="content">
this is a test for tooltip. this is a test for tooltip. this is a test for tooltip. this is a test for
tooltip.
</div>
<div>
main content of the site goes here. main content of the site goes here. main content of the site goes
here. main content of the site goes here. main content of the site goes here. main content of the site
goes here. main content of the site goes here. main content of the site goes here. main content of the
site goes here. main content of the site goes here. main content of the site goes here. main content
of the site goes here. main content of the site goes here. main content of the site goes here. main
content of the site goes here. main content of the site goes here. main content of the site goes here.
main content of the site goes here. main content of the site goes here. main content of the site goes
here.
</div>
<telerik:RadToolTip ID="rtt" runat="server" TargetControlID="content" IsClientID="true" RelativeTo="Element"
Position="MiddleRight">
this is the content of the tooltip.
</telerik:RadToolTip>
</div>
</form>
</body>
</html>
2 Answers, 1 is accepted
0
Accepted
Hello Morgan,
You are right that the problem is caused by the relative positioning of the parent or RadToolTip.
Unfortunately, this is an expected and correct browser behavior we cannot override.
Any relative or absolute positioned element (RadToolTip is absolute positioned) inside a parent with relative of absolute position gets the top and left of that particular parent (not the top and left of the body element).
What you can do is to put the server declaration of RadToolTip outside that div so it's generated code is outside the DOM of #mainContainer. The other possible solution is that you reconsider the need of position: relative of the wrapper and probably remove that property. If you take the second solution and experience difficulties, please, send me a sample project along with a description of the result you want to achieve and I will help.
Greetings,
Martin Ivanov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
You are right that the problem is caused by the relative positioning of the parent or RadToolTip.
Unfortunately, this is an expected and correct browser behavior we cannot override.
Any relative or absolute positioned element (RadToolTip is absolute positioned) inside a parent with relative of absolute position gets the top and left of that particular parent (not the top and left of the body element).
What you can do is to put the server declaration of RadToolTip outside that div so it's generated code is outside the DOM of #mainContainer. The other possible solution is that you reconsider the need of position: relative of the wrapper and probably remove that property. If you take the second solution and experience difficulties, please, send me a sample project along with a description of the result you want to achieve and I will help.
Greetings,
Martin Ivanov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
James
Top achievements
Rank 2
Rank 2
answered on 07 Jul 2008, 02:45 PM
ahh yes you are right. thanks!