How to change tooltip color on open using jQuery UI Tooltip?

I'm trying to achieve the following, can't figure out how though. I have several tooltips on a page, but I want each one to look different (depending on severity for instance). Here is what I have so far:

<div id="container">
<a href="#" title="Tooltip 1" data-severity="warning">Tooltip 1 (Warning)</a>
<a href="#" title="Tooltip 2" data-severity="danger">Tooltip 2 (Danger)</a>
</div>

<script type="text/javascript">
// init tooltip
ArrowToolTip.init('container');
</script>

/*JAVASCRIPT*/
var ArrowToolTip = {
init: function (parentId) {
    jQuery('#' + parentId).tooltip(
    {
        content: function () {
            var element = jQuery(this);
            return element.attr('title');
        },
        create: function () {
            var element = jQuery(this);

            var severity = element.data('severity');

            if (!severity) {
                severity = 'default';
            }

            element.tooltip('option', 'tooltipClass', severity);
        },
        open: function(event, ui) {
            var element = jQuery(this);
            var severity = element.data('severity');
            ui.tooltip({
                tooltipClass: severity 
            });
            //ui.tooltip.tooltipClass(severity);
            console.log(event);
            console.log(ui);
        }
    });
}
}

Whatever I have in the create: works, but it's only called on page load, so that doesn't do me any good. So now I'm trying to move this to the open: event. But that doesn't seem to work at all. The jQuery(this) doesn't return the hovered element, it returns the container. How can I get the correct element to select the data attribute? And how can I then change the CSS class? Does anyone know how this could be achieved?

Answers


I didn't get your logic very well, but here's how I achieve different classes depending on data-severity. Instead of applying .tooltip() to all elements, iterate through them and set the tooltipClass as $(this).data('severity'). The content function allows to add a class too.

$('a.tips').each(function () {
    var severity = $(this).data('severity');
    $(this).tooltip({
        content: function () {
            return '<em>' + $(this).attr('title') + '</em>';
        },
        tooltipClass: severity,
        show: "slideDown",
        open: function (event, ui) {
            ui.tooltip.hover(function () {
                $(this).fadeTo("slow", 0.5);
            });
        }
    });
});
.ui-tooltip {
    padding: 10px 20px;
    border-radius: 20px;
    font: bold 14px"Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
}
.ui-tooltip.warning {
    color: #E3E8F7;
    background: #D94AA4;
}
.ui-tooltip.danger {
    color: #212942;
    background: #CABA75;
}
a.tips { float:left; margin: 0 10px; text-decoration:none; font: Sans-Serif; }
body { background-color:#eee; padding: 30px; }
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.tooltip.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<div id="container">
<a href="#" title="Tooltip 1" class="tips" data-severity="warning">(Warning)</a>
<a href="#" title="Tooltip 2" class="tips" data-severity="danger">(Danger)</a>
</div>

Need Your Help

Wrong variable getting updated

c# race-condition

I have been struggling with something that I found out to be very weird. Obviously, C# behaves this way but I was wondering how to prevent it. My code is very long so I've made a small example of my

Extlib dialog appears to be pinned to the right window border

xpages xpages-extlib

I'm having this strange phenomenon with an extlib dialog which I've never encountered before.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.