Como sobrescribir behaviors en Drupal 7

Es común en los proyectos desarrollados con Drupal, tener instalados muchos módulos contribuidos, pero se presentan ocasiones donde necesitamos sobrescribir parte de la funcionalidad de estos módulos de manera que se adapten a los requerimientos de nuestro proyecto, pero bien sabemos que no es buena práctica de programación modificar los archivos originales de estos módulos, por lo que tenemos que buscar opciones para lograr nuestro objetivo.

Para ejemplificar como sobrescribir un behavior de Drupal, voy a utilizar el módulo de BetterTip. Este módulo por defecto muestra tooltips sobre todos los elementos HTML en una página, que tengan la propiedad title presente como se puede apreciar a continuación.

<a href="/" title="This is Sample Tooltip">Click here</a>

Si nos posicionamos con nuestro ratón sobre el enlace creado anteriormente, observaríamos algo como:

Significa que si una imagen, un enlace, un div o cualquier otro elemento HTML tiene esa propiedad, se va a mostrar el tooltip como se mostró anteriormente. Pero, ¿qué hacemos si queremos mostrar únicamente este tooltip a elementos que tengan una clase específica, por ejemplo la clase “mostrar-tooltip”?. Lo podemos realizar de la siguiente forma:

1. Copiamos el behavior del módulo.

El módulo BetterTip contiene un archivo de javascript llamado bettertip.js en su raíz, copiamos el código para pegarlo en un archivo javascript creado y personalizado por nosotros en módulo personalizado.

(function ($) {
  var $bettertip;
  Drupal.behaviors.bettertip = {
    attach: function (context, settings) {
      if (!$bettertip) {
        $bettertip = $('<p class="bettertip"></p>');
        $bettertip.appendTo('body').hide();
      }

      $('[title]').once('bettertip-processed').each(function () {
        var $$ = $(this),
        titleText = $$.attr('title');

        $$.removeAttr('title');

        $$.hover(function (e) {
		if (titleText != "") {
          $bettertip
            .text(titleText)
            .css('top', (e.pageY - 10) + 'px')
            .css('left', (e.pageX + 20) + 'px')
            .fadeIn('slow');
			}}, function () {
          $('.bettertip').hide();
        });

        $$.mousemove(function (e) {
          $bettertip
            .css('top', (e.pageY - 10) + 'px')
            .css('left', (e.pageX + 20) + 'px');
        });
      });
    }
  };
})(jQuery);

2. Modificamos el código.

Una vez aplicado el código en nuestro archivo personalizado, modificamos el código según los requerimientos de nuestro proyecto. En este caso voy a indicar que el tooltip debe aparecer únicamente cuando el ratón esté sobre elementos HTML con clase ”mostrar-tooltip”. Esto lo realizamos así:

(function ($) {
  var $bettertip;
  Drupal.behaviors.bettertip = {
    attach: function (context, settings) {
      if (!$bettertip) {
        $bettertip = $('<p class="bettertip"></p>');
        $bettertip.appendTo('body').hide();
      }

      $('.mostrar-tooltip[title]').once('bettertip-processed').each(function () {
        var $$ = $(this),
        titleText = $$.attr('title');

        $$.removeAttr('title');

        $$.hover(function (e) {
		if (titleText != "") {
          $bettertip
            .text(titleText)
            .css('top', (e.pageY - 10) + 'px')
            .css('left', (e.pageX + 20) + 'px')
            .fadeIn('slow');
			}}, function () {
          $('.bettertip').hide();
        });

        $$.mousemove(function (e) {
          $bettertip
            .css('top', (e.pageY - 10) + 'px')
            .css('left', (e.pageX + 20) + 'px');
        });
      });
    }
  };
})(jQuery);

El cambio se realizo en la línea 10 del behavior, donde agregué la clase específica.

3. Aplicar cambios.

Limpiamos caché de nuestro sitio para que Drupal incluya los cambios realizados y para probar que los cambios realmente están funcionando, vamos con nuestro ratón por elementos con la clase ”mostrar-tooltip” para observar el tooltip. Y si hay otros elementos HTML en la página con la propiedad title, va a tener el comportamiento por defecto del navegador, pero el módulo no mostrará el tooltip.

Saludos!