Javascript 左侧的工具提示位置

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

工具提示1

工具提示2

工具提示3

工具提示4

CSS:

。工具提示{
显示：无；
字体大小：12px；
高度：70像素；
宽度：160px；
填充：25px；
颜色：#eee；
}

JS

$（“#演示img[标题]”）。工具提示（）；

不需要Javascript

在下一行显示元素

title

属性

演示：

[您的]HTML

---

看起来您正在使用jQuery UI工具提示插件

您可以看到，您可以通过以下方式指定工具提示位置：

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

---

我觉得很困惑，您没有在演示链接中添加jquery ui引用。将jquery-ui.js和jquery.js添加到您的小提琴中。我希望显示工具提示，并且“我希望在下一行中显示此内容”行应仅显示在工具提示的下一行。@Bittu您的意思是要将工具提示拆分为多行吗？然后向左放置。@Bitu您不控制工具提示的位置。它显示在鼠标调用它的任何地方。如果你想这样做，那么你应该使用完全不同的方法。你也能给我一把小提琴吗？

#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 */
}

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