Apply different CSS classes to different Tooltips

[mdmoura]

Hello,

I am applying tooltips in a page as follows:

$('a.Action').powerTip();

$('a.Menu').powerTip();

Is it possible to have the tooltips applied to Action to have a CSS class and the tooltips applied to Menu to have another CSS class?

Thank You, Miguel

[stevenbenner]

An option to add custom classes will be coming in version 1.2.1 (see: issue #59). But just because there isn't an easy option for it at the moment doesn't mean it's impossible.

You can set a class on the tooltip when it's about to open using the powerTipRender event.

Example:

// hook powerTipRender on action links
$('a.Action').on('powerTipRender', function() {
    // add action class
    $('#powerTip').addClass('customActionClass');
});

// hook powerTipRender on menu links
$('a.Menu').on('powerTipRender', function() {
    // add menu class
    $('#powerTip').addClass('customMenuClass');
});

Important Notes:

• The PowerTip tooltip has the id of #powerTip by default. But you can change that in the options.
• All classes on the tooltip div are removed when the tooltip closes, so you will have to add the class again at the appropriate time (that's why I'm using the powerTipRender event in those examples).

[mdmoura]

Thank worked. Thank you ...

BTW, the code you posted is an example how custom configuration in PowerTip sometimes is strange.

If you don't mind let me show how I think it would become easier to use it with custom configuration:

$('a.Element').powerTip({ 
  cssClasses: ["Tooltip", "Menu"],
  placementCssClasses: ["n", "e", "s", ..],
  content: function ($element) {
    return $element.parent().find('.Html').html();
  },
  onClick: function ($element, $tooltip) {
    // Do something
  },       
  // ...
}

This way a user can define the main CSS Classes and CSS Classes for each placement.

For content it would be possible to use the $element to get its title, next element or anything else.

Then for other functions such as onClick it can access the $element that fires that tooltip or the Tooltip itself.

I think this would be really flexible and easy to use in different scenarios ...

[stevenbenner]

I'm glad that worked for you, and thank your for the suggestions.

Closing the issue since the question has been answered and the feature request is a duplicate.