如何使用jQuery UI Tooltip在打开时更改工具提示颜色？

Question

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?

Answer 1

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> 

Answer 2

i am not clear about your quection. But i hope this will help you sometimes....

I am using tooltipClass name as "tooltipclass" in my jquery.

$(document).tooltip({effect: "blind", duration: 1000, tooltipClass: 'tooltipclass'});

And using that class name you can give any styling to the tool tip.

.tooltipclass{
    font-size: 12px;
    border:1px solid #e74c3c;
}

so try using different tooltipClass names.........