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>