Blogs  Work culture, passion and sharing ideas

You are here: 

You are here

Home  »  Blogs  »  Uncluttered Drupal form tooltips with jQuery

Uncluttered Drupal form tooltips with jQuery

Making Drupal sites certainly requires lots of know-how, trial and error, some research and lots of tea! While creating the new version of Raven Developers on Drupal 7 it was evident that a lot had changed in API, theming and overall interface since Drupal 6. Improvements to front and back-office with use of overlay Seven admin was a big relief. Believe more is on the way lets wait and see for next major release of Drupal 8.

Forms are an essential part of any website, so is how they are presented. The idea was to create forms based on "Less is better" principle. Drupal gives you with a standard format of forms and form element descriptions that sit right below each form element; but that's how it was envisioned. To get more subtle form interface we decided to make form descriptions invisible at first, they only appear upon focus on each element with a ballon/call-out tip that fly's out with animation.

So, first test case began with a minimal empty template, then some flavors and some spice that resulted in something like:

Drupal Tooltips

The tip itself is nothing but default Drupal rendered output of form description, but with CSS3 you could make it look like a callout by using CSS snippet below:

div.description {
  font-family:"PT Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:#707070;
  text-align:left;
  display:none;
  border-radius:5px 5px 5px 5px;
  color:#ffffff;
  font-size:0.75em;
  line-height:150%;
  padding:5px 10px;
  position:absolute;
  max-width:250px;
  margin:0 50px 0 0;
  text-shadow:1px 1px #555555;
}
div.description:after {
  border-color:#707070 transparent;
  border-style:solid;
  border-width:8px 8px 0;
  bottom:-8px;
  content:"";
  display:block;
  left:10px;
  position:absolute;
  width:0;
}
div.description:before {
  border-color:#707070 transparent;
  border-width:17px 17px 0;
  bottom:-15px;
  content:"";
  display:block;
  left:43px;
  position:absolute;
  width:0;
}

Now it was upto jQuery twiddling to show/hide/animate the tip. The challenge was correctly placing the tip as Drupal renders them inside each form element wrapper. Somehow relative placement with jQuery position() method didn't do the job. ERGO the tips needed to be placed with a more broader area such as the document itself. As in the jQuery plugin snippet below:

/*!
 * jQuery Drupal form tooltips
 * Examples and documentation at: http://ravendevelopers.com/blog/2012/10/uncluttered-drupal-form-tooltips...
 * Author: Anirudh K. Mahant
 * Requires: jQuery v1.2.6+
 */

jQuery.fn.exists = function () {
  return this.length !== 0;
};
(function ($) {
  $.fn.drupalFormTips = function () {
    return this.each(function (i) {
      var controlBox = jQuery(this).find('textarea, select, input[type="text"], input[type="email"], input[type="password"]');
      var toolTip = jQuery(this).find('div.description:eq(0)');
      toolTip.attr('rel', controlBox.attr('id'));
      jQuery(this).find('div.description:eq(0)').remove();
      jQuery('body').append(toolTip);
      if (jQuery(toolTip).exists() & jQuery(controlBox).exists()){
        var controlPosition = jQuery(controlBox).offset();
        var controlWidth = jQuery(controlBox).outerWidth(true);
        var tipHeight = jQuery(toolTip).outerHeight(true);
        var tipWidth = jQuery(toolTip).outerWidth(true);
        var posX = Math.round(controlWidth + controlPosition.left - (controlWidth / 3));
        var posY = Math.round(controlPosition.top - tipHeight - 10);
        jQuery(toolTip).css({
          'left': posX+'px',
          'top': posY+'px'
        });
        jQuery(controlBox).focus(function(){
          jQuery(toolTip).fadeIn('500').delay('10000').animate({'margin-top': '-50px', opacity: 0}, '90000');
        });
        jQuery(controlBox).blur(function(){
          jQuery(toolTip).hide().animate({'margin-top': '0', opacity: 1});
        });
      }
    });
  };
})(jQuery);

What we did was remove the tip from its wrapper and append it to body which places it right above </body> tag and use document offset() for positioning. To assign this behavior just call the plugin with:

jQuery('div.maincnts div.column-left form .form-item').drupalFormTips();

and your all set to go. The jQuery selector you use must be form elements wrapper; in Drupal's case its .form-item class. Signing off with Stephen Hill - Hearts of Space... safe journey space fans wherever you are...

Copyrights © 2007-2016 Raven Developers. All rights reserved.

Powered by: Drupal 7 and Foundation 4

preliminary