javascript - Tooltip position on left side - Stack Overflow

admin管理员组

文章数量:1429708

I have this code which displays a tool tip on mouse hover. How do I make the tool tip text to be displayed on the next line and on the left side? 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();

I have this code which displays a tool tip on mouse hover. How do I make the tool tip text to be displayed on the next line and on the left side? 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();

• javascript
• html
• css

Share Improve this question Follow edited May 20, 2015 at 12:23 Greg 9,17866 gold badges5151 silver badges9191 bronze badges asked Sep 10, 2013 at 10:39 BittuBittu 38733 gold badges66 silver badges1313 bronze badges 2

• 2 I find it very confusing, you have not added jquery ui reference in your demo link. – Rameez Commented Sep 10, 2013 at 10:41
• add jquery-ui.js and jquery.js to your fiddle. – Biswajit Maji Commented Sep 10, 2013 at 10:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

looks like you are using the jQuery UI Tooltip plugin.

if you have a look at the documentation you can see that you can specify the tooltip position with something like this:

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

No Javascript required...

Show the elements title attribute on the line below

DEMO: http://jsfiddle/XZWhJ/7/

[Your] 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 */
}

本文标签： javascriptTooltip position on left sideStack Overflow