I need help with customizing a tooltip in my code. I want the tooltip text to be displayed on the next line and positioned on the left side. You can view a demo here.
<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();