Different styles for different tooltips on the same page Created May 26, 2010

a.tooltip-red {}
a.tooltip-red + div.tooltip {background-color: red;}
a.tooltip-blue {}
a.tooltip-blue + div.tooltip {background-color: blue;}

$("a.tooltip-red").tooltip({});
$("a.tooltip-blue").tooltip({});

$(".has-tooltip-right").tooltip({
        effect: 'slide',
        direction: 'right',
        bounce: true,
        offset: [0, -20],
        predelay: 3000,
        position: 'center right',
        opacity: .99,
        tipClass: 'tooltip-right',
        onShow: function() {
            this.getTip().animate({ opacity: 1 }, 2000);
        }
    });

    $(".has-tooltip-left").tooltip({
        effect: 'slide',
        direction: 'left',
        bounce: true,
        offset: [0, 20],
        predelay: 3000,
        position: 'center left',
        opacity: .99,
        tipClass: 'tooltip-left',
        onShow: function() {
            this.getTip().animate({ opacity: 1 }, 2000);
        }
    });

.tooltip-left
{
	display: none;
	font-size: 15px;
	height: 60px;
	width: 171px;
	padding: 25px;
	color: #ffffff;
	background: transparent url('../../../Content/black_arrow_left.png');
}

.tooltip-right
{
	display: none;
	font-size: 15px;
	height: 60px;
	width: 171px;
	padding: 25px 25px 25px 30px;
	color: #ffffff;
	background: transparent url('../../../Content/black_arrow_right.png');
}