CODEWITHSUNDEEP
javascripthtmlcss
Bittu
Bittu

Reputation: 387

Tooltip position on left side

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

Upvotes: 3

Views: 10470

Answers (2)

Jimmery
Jimmery

Reputation: 10139

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

Upvotes: 1

gvee
gvee

Reputation: 17161

No Javascript required...

Show the elements title attribute on the line below

DEMO: http://jsfiddle.net/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 */
}

Upvotes: 0

Related Questions