Question

我想通过使用一些jquery在css中创建与Position Relative相同的效果。

我创建了一种工具提示，我试图将其附加到不同的对象，如文本框，复选框，一些文本等。

所以我的代码就是

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

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

目前我使用一些Jquery将工具提示放在文本框的右侧。

当页面上的某些内容发生变化时，就会出现问题。例如，如果文本框上方有弹性文本区域。当它展开时，它会向下推文本框，然后工具提示不再正确对齐。

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

Answer 1

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

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

我使用包含工具提示的span标记跟踪每个输入。我将跨度定位为“绝对”。工具提示显示在焦点上，并在模糊时删除。

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

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

以下是代码的片段。

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);
    });

Answer 2

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

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

使用父元素：

您的HTML将更易于阅读且更有意义，
您可以轻松获得所需的演示文稿。

编辑：或者，让关系正确的另一种方法是使用输入元素的title属性作为工具提示内容，并使用JS读取并将其插入生成的HTML（我是确定有这个jQuery插件）。对于不需要任何格式化的短消息，这将是我最喜欢的方式。

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

2 个答案: