Is there a way to customize the appearance of tooltips using jQuery UI Tooltip? I want to format tooltips similar to the image shown below for HTML content.
JavaScript:
$(function () {
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$('[rel=tooltip]').tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
CSS:
.tooltip-div {
height: 144px;
margin: 0 auto;
padding: 0;
width: 280px;
}
.tooltip-top {
background-color: #FAF9DD;
border: 1px solid #D8D8D8;
float: left;
height: 153px;
padding: 0;
width: 258px;
}
.tooltip-area {
color: #7F7F7F;
float: left;
font-family: 'open_sanssemibold_italic';
font-size: 15px;
height: 110px;
margin: 0 auto;
padding: 18px 0 0 32px;
width: 227px;
}
/*.toltip-arrow {
background: url("images/toltip-arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 22px;
margin: 65px 0 0 -1px;
width: 14px;
}*/
.tooltip-close {
float: right;
height: 13px;
margin: 9px 8px 0 0;
width: 13px;
}
.ui-tooltip, .arrow:after {
background: #FAF9DD;
}
.ui-tooltip {
/*padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px"Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
*/
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content:"";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
}