How To Add Line Break To JQuery UI Tooltip?

If you want to know how to add  JQuery UI tooltip, then you can refer my previous post link:

http://www.jkstack.com/2013/08/how-to-add-arrow-or-pointer-with-jquery.html

Today, we will learn How To Add Line Break To JQuery UI Tooltip.

Here is HTML Code:

<div>
<input type="text" title="<b>This</b> <br/>is a example of <br/> break line tooltip" 
style="margin: 200px 0 0 150px;" />
</div> 

CSS Code:

.ui-tooltip {
background: #FFFF;
color: black;
border: 2px solid #a4c8f5;
padding: 0;
opacity: 1;
}
.ui-tooltip-content {
position: relative;
padding: 1em;
}
.ui-tooltip-content::after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
}
.right .ui-tooltip-content::after {
top: 18px;
left: -10px;
border-color: transparent #a4c8f5;
border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
top: 18px;
right: -10px;
border-color: transparent #a4c8f5;
border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
bottom: -10px;
left: 72px;
border-color: #a4c8f5 transparent;
border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
top: -10px;
left: 72px;
border-color: #a4c8f5 transparent;
border-width: 0 10px 10px;
}

JQuery Code:

$(function() {
var tooltips = $( "[title]" ).tooltip({
    position: {
       my: 'center bottom',  // for position, currently it is on top                 
       at: 'center top-10' 
        }
    });
 });

$( "[title]" ).tooltip('option', 'tooltipClass', 'top'); // Added top class here

$("[title]").each(function(){
    $(this).tooltip({ content: $(this).attr("title")});
});    // It allows html content to tooltip.

Check running example here:
http://jsfiddle.net/jeetu_verma11/SNVaK/1/

Share on Google Plus

About JK STACK

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.