相对于其朋友元素的定位元素

我想通过使用一些jQuery创建一个与位置相对相同的效果。相对于其朋友元素的定位元素

我创建了一个类型的工具提示，我试图连接到不同的对象，如文本框，复选框，一些文字等

所以我的代码是沿

<input id="adsfjlk" type="textbox" /> 
<div class="TooltipBalloon"> SOME TEXT</div>

行现在当然CSS相对定位是基于父元素的。在这种情况下，我无法做到这一点，因为我无法在输入元素中放置div。

目前我使用一些jquery来定位工具提示只是在文本框的右侧。

问题出现在页面上的某些内容发生变化时。例如，如果你的文本框上方有一个弹性的textarea。当它展开时，它将按下文本框，然后工具提示不再正确对齐。

由于可能发生的不同事件的数量，我不能真正将OnChange类型事件应用于弹性，而是需要一种更好的方法来保持元素相对于彼此的位置。

来源

2011-04-11 Steve

为什么不把输入元素，并在包装元素的提示？无关，“好友元素”很可爱:) – zdyn 2011-04-11 16:31:00

您正在寻找JavaScript中的'offsetLeft'和'offsetTop'属性。使用绝对定位以及z-index，您将能够创建工具提示。如果您有兴趣以这种方式工作，我可以深入研究IE Quirks模式。 – 2011-04-11 16:35:07

你能告诉我们你当前的代码吗？此外，如果您正在计算文本框的位置并将div放在绝对位置上，则内容的弹性无关紧要。 – 2011-04-11 16:36:24

在HTML中获得正确的关系，一切都将落实到位。

这里有一些缺失 - 这两个元素是相关联的，但HTML中没有任何内容表明这一点。最简单的方法是给它们一个父元素。一旦它们都分组在一个父元素中，您可以将两者都放在相对于父元素的位置。

与父元素：

你的HTML会更容易阅读，更有意义，
你可以很容易地得到所需的演示文稿。

编辑：或者，其他方式获得的关系正确的是使用的输入元素的title属性为您提示内容，并用JS读取并将其插入到生成的HTML（我敢肯定有这个jQuery插件）。这将是我不喜欢任何格式的短消息的青睐方式。

来源

2011-04-11 16:34:41 edeverett

我不知道你是如何显示工具提示（焦点上悬停），但是我已经创建了这个如何创建输入工具提示的例子。

http://jsfiddle.net/c4KyD/2/

我随后用含有工具提示的跨度标签中的每个的输入。我将跨度定位为“绝对”。工具提示显示在焦点上并在模糊处移除。

如果页面上有一些动态内容，工具提示仍然可以正确定位（如果您注释掉模糊功能并使用“更改页面”链接插入内容，您将会看到此操作）。

我还为悬停事件创建了代码（在我的示例中注释掉了）。

这里是代码片段。

HTML ...

<ul class="tooltip-stuff"> 
    <li> 
    <label>First Name</label> 
    <input class="tooltip" type="text" /> 
    <span>Enter your first name here.</span> 
    </li> 
</ul>

CSS ...


.tooltip-stuff SPAN 
{ 
    border: 1px solid #D3D3D3; 
    margin-left: 5px; 
    padding: 0 6px; 
    background-color: #C4ECF8; 
    position: absolute; 
    display: none; 
}

jQuery的...


    $('.tooltip').focus(function() { 
     $(this).next('span').fadeIn(100); 
    }); 

    $('.tooltip').blur(function() { 
     $(this).next('span').fadeOut(100); 
    });

来源

2011-04-12 06:16:07 wdm

这似乎是一个很好的方法来做到这一点，唯一的问题是，我的代码可以处理要么放置在上面的工具提示指向元素，要么右侧并指向元素的左侧，我不确定这个解决方案是否可以使用这个 – Steve 2011-04-12 07:51:07

相对于其朋友元素的定位元素

回答

相关问题