Question

$('.selector').qtip({
    content: {
      text: function(api) {
         return $(this).children('.tip').clone();
      }
    },
   style: {
      classes: 'ui-tooltip-rounded',
      width: 210
   },
    position: {
      my: 'bottom center',
      at: 'bottom center',
      viewport: $(window)
   },
    hide: {
      fixed: true,
      delay: 500
   },
   events: {
      show: function(event, api) {
        $('.selector').css('border', '1px solid black');
      }
   }

});

I’m using the qtip 2 plugin, but I would like to change a particular selector (‘this’) instead of all selectors.

The code above draws a black border around all my “tip” icons on the page…is there a way (using qtip2) to reference a particular “tip” graphic (‘.selector’)?

Answer 1

Have a look into the api object that is passed to the events.show callback. With your parameter names you’ll find the element (for which the qTip is shown) in api.elements.target. The element can then be examined to decide whether to apply a specific style.
More related elements are available from the API.

The other option would be to apply the qTip plugin for all elements except the one with the custom style. Then another time with changed options for the element with the custom styled qTip only.

Update: Referring to element as proposed by Troy Barlow since his suggestion is probably the better choice that my originally proposed data source.