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

css FAIL

2 Answers 71 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 2
James asked on 04 Jul 2008, 03:25 PM
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:

<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

Sort by
0
Accepted
Martin
Telerik team
answered on 07 Jul 2008, 06:08 AM
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
0
James
Top achievements
Rank 2
answered on 07 Jul 2008, 02:45 PM
ahh yes you are right. thanks!
Tags
ToolTip
Asked by
James
Top achievements
Rank 2
Answers by
Martin
Telerik team
James
Top achievements
Rank 2
Share this question
or