左侧的工具提示位置

Question

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

<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插件。

if you have a look at the documentation您可以看到您可以使用以下内容指定工具提示位置：

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

Answer 2

不需要Javascript ...

在下面一行显示元素title属性

DEMO： 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 */
}