javascript - 左侧的工具提示位置

Question

我有这段代码，它在鼠标悬停时显示工具提示。如何使工具提示文本显示在下一行和左侧？演示

<div id="demo">
   <p title="The tooltip text I want this in next line"> Tooltip 1</p>
   <p title="The tooltip text I want this in next line">Tooltip 2</p>
   <p title="The tooltip text I want this in next line">Tooltip 3</p>
   <p title="The tooltip text I want this in next line">Tooltip 4</p>
</div>

CSS：

.tooltip {
    display:none;
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#eee;
}

JS

$("#demo img[title]").tooltip();

Answer 1

看起来您正在使用 jQuery UI Tooltip 插件。

如果您查看文档，您可以看到您可以使用以下内容指定工具提示位置：

$("#demo p[title]").tooltip({
    track: false,
    position: {my: "left top", at: "left bottom"}
});

Answer 2

不需要Javascript...

title在下面的行中显示元素属性

演示：http: //jsfiddle.net/XZWhJ/7/

[你的] HTML

<div id="demo">
  <p title="The tooltip text I want this in next line"> Tooltip 1</p>
  <p title="The tooltip text I want this in next line">Tooltip 2</p>
  <p title="The tooltip text I want this in next line">Tooltip 3</p>
  <p title="The tooltip text I want this in next line">Tooltip 4</p>
</div>

CSS

#demo p[title] {
    position: relative;
    margin-bottom: 1em; /* leave enough space for the tooltip */
}

#demo p[title]:hover:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: -1em; /* place it below the parent */
}