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?
var element = ui.tooltip;
. – Louisiana