qTip & Area Image Mapping

Saturday, March 16, 2013

Attaching qTip tooltips can be done relatively easily. qTip provides a very straightforward approach by targeting the selector & the desired content attribute.


(function ($) {
    // Allow qtip to target alt of <area />.
    jQuery('area[alt]').qtip( {
      content: {
        attr: 'alt'
      },
      style: {
        classes: 'ui-tooltip-shadow ui-tooltip-light'
      }
    });
    // Target field item img(s) element.
    jQuery('.field-item img').each(function() {
      jQuery(this).qtip({
        style: {
          classes: 'ui-tooltip-shadow ui-tooltip-light'
        },
        content : jQuery(this).attr('alt')
      });
    });
})(jQuery);

The above code would attach qTip onto two separate elements. The first targets all < area > tags on the page. This is useful when qTip is required to appear on a single element, like an image & or video. The area map over the image would provide more points at which to target & append qTip too.

What about general qTip usage? Below is an example I made for an online store (drupal 7). The example extends behaviours using the target element's rel & alt tag as the content to display in the hover tip.


  /**
   * General.
   */
  Drupal.behaviors.qtip = {
    attach: function (context, settings) {
      // Attach.
      $('.views-field-field-images img').each(function() {
        $(this).qtip({
          style: {
            classes: 'ui-tooltip-shadow ui-tooltip-dark',
          },
          position: {
            my: 'bottom left',
            at: 'top right',
          },
          content: 'Type: <strong>' + $(this).attr('alt') + '</strong>' + 
          'Price: <strong>' + $(this).attr('rel') + '</strong>',
        });
      });
    }
  };

Comments

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Target Image