Graphical user interface – stoimen's web log on web development Tue, 13 Feb 2018 08:18:15 +0000 en-US hourly 1 https://wordpress.org/?v=5.0.3 clickoutside jQuery plugin /2010/02/17/clickoutside-jquery-plugin/ /2010/02/17/clickoutside-jquery-plugin/#comments Wed, 17 Feb 2010 15:00:14 +0000 /?p=1116 Continue reading clickoutside jQuery plugin →
Related posts:
  1. Event driven programming with jQuery – (part 3). What is a module?
  2. jQuery tooltip plugin!
  3. cancel bubbling on element click with jQuery
  4. jQuery localStorage plugin
]]> I wrote a small plugin to jQuery that adds the event of clicking outside an element. You know sometimes you should close some modal windows when clicking outside. It’s really simple and small. Please provide any feedback that will improve it.

(function(jQuery) {
   jQuery.fn.clickoutside = function(callback) {
      var outside = 1, self = $(this);
      self.cb = callback;
      this.click(function() {
         outside = 0;
      });
      $(document).click(function() {
         outside && self.cb();
         outside = 1;
      });
      return $(this);
   }
})(jQuery);

You can see the demo page here. To install it just include the chunk above after the jQuery library code.

Related posts:

  1. Event driven programming with jQuery – (part 3). What is a module?
  2. jQuery tooltip plugin!
  3. cancel bubbling on element click with jQuery
  4. jQuery localStorage plugin

]]> /2010/02/17/clickoutside-jquery-plugin/feed/ 7 jQuery tooltip plugin! /2010/02/16/jquery-tooltip-plugin/ /2010/02/16/jquery-tooltip-plugin/#comments Tue, 16 Feb 2010 11:43:57 +0000 /?p=1099 Continue reading jQuery tooltip plugin! →
Related posts:
  1. clickoutside jQuery plugin
  2. jQuery: Get the Selected Option Text
  3. jQuery browser and OS detection plugin
  4. 2xjQuery: Select a Selector
]]> Tooltips and jQuery

In order to complete the tooltip post series I decided to make a plugin for jQuery that implements tooltips in the most simple way I was able to find! I have no idea what are the other plugins for tooltips and I never used such plugin, but however I needed one in order to complete my task an suddenly I turn it into a plugin.

What I’d like to hear is requests for improvements and bugs reported, just to make the plugin as useful as possible.

Let’s start in that post with some primary HTML markup, here are the complete source and demo page.

<html>
<head>
 <title>jQuery tooltip</title>
</head>
<body>
<p>A DIV element wrapped in another DIV that's 800 pixels wide and thus defines the bounds</p>
<div id="wrap" style="width:800px;border:1px solid blue;">
 <div id="container" title='test' rel="here's some<br />HTML and image<br /><img src='/jquery-logo.png' />" style="border:1px solid red;">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus vulputate arcu in mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla nunc libero, eleifend in imperdiet lacinia, pellentesque eget turpis. Nulla consectetur augue vulputate arcu porta tempus. Mauris nisl risus, fermentum posuere sodales sed, accumsan in massa. Pellentesque facilisis, felis sit amet vulputate egestas, nibh lacus sollicitudin nulla, non commodo nunc elit et eros. Nulla eu placerat mauris. Phasellus sit amet odio nec dui pharetra pulvinar. Nunc sollicitudin, nisl quis interdum consequat, diam dolor condimentum felis, ac porttitor turpis augue nec sapien. Quisque pulvinar nulla ut elit dapibus in tempus ipsum interdum. Pellentesque feugiat tempus tortor, mollis fringilla ligula faucibus nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus ullamcorper lacus. Maecenas at blandit justo. Maecenas adipiscing velit luctus mauris gravida adipiscing. Morbi molestie ipsum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sapien mi, hendrerit sit amet semper ut, condimentum et risus. Nulla facilisi.
 </p>
 </div>
</div>
<p>When defined over an image the tooltip gets the text into the alt attribute by default</p>
<img id="my-img" src="/jquery-logo.png" alt="test" />
<p>When you attach the .tooltip() method on a link it gets its title attribute for the tooltip by default. Note that you can add more and more links after you attach the .tooltip() method on that class name. This is because the plugin make use of the .live() method of jQuery</p>
<a href="http://stoimen.com/" title="a title of the link">Just a link!</a>

And right after that the JavaScript:

<!-- include the jQuery library -->
<script src="/jquery-1.3.2.js"></script>
<script>
// this is the plugin code. You can copy/paste it at the bottom of the jquery.js library file
(function(jQuery) {
 jQuery.fn.tooltip = function(options) {
 $('body').append('<div id="sstt" style="display:none;"></div>');
 if (typeof options == 'undefined') options = {};
 this.live('mousemove', function(e) {

 var att = 'attribute' in options && $(this).attr(options.attribute);
 if(!att) att = $(this).attr('rel');

 var bbox = 'bbox' in options && options.bbox;
 if (!bbox) bbox = $(document);

 if ('text' in options && options.text) att = options.text;

 if ($(this).is('img')) att = $(this).attr('alt');
 if ($(this).is('a')) att = $(this).attr('title');

 var elem = $('#sstt'),csstxt = elem.css('cssText'),ew=elem.width(),dw=bbox.width(),px=e.pageX+10,py=e.pageY+10;
 elem.html(att);
 var eloffset = dw > px+ew &&
 elem.css('cssText', csstxt+';position:absolute;top:'+py+'px;left:'+px+'px;display:block');

 !eloffset &&
 elem.css('cssText', csstxt+';position:absolute;top:'+py+'px;left:'+(dw-ew)+'px;display:block');
 });
 this.live('mouseout', function() {
 $('#sstt').hide();
 });
 };
})(jQuery);

How to setup the options?

The .tooltip() method has an optional “options” parameter that specifies simple parameters for the tooltip itself.

{
 attribute : 'rel',
 bbox : $(document),
 text : ''
}

By default the plugin uses the REL attribute for the text of the tooltip, but you can override it by setting the options attribute property:

var options = { attribute:'title'}

Here the tooltip will take the TITLE attribute value. Note that the TITLE attribute is default for anchor tags and the construction above will be default for them. Over links the .tooltip() method gets the ALT attribute.

bbox is the default bound box for the tooltip. Default value is $(document), but it can be any other jQuery object. Look at the examples bellow.

text is predefining the tooltip’s text.

Finally some examples

1. Usage with no options. The REL attribute is considered as text for the tooltip and the bound box is the document:

$('#container').tooltip();

2. Usage with bound box. The REL is yet again considered as text for the tootip and the bound box is passed as argument as a jQuery object.
2.1. The parent element:

$('#container').tooltip({bbox:$('#container').parent()});

2.2. Explicit defined parent element:

$('#container').tooltip({bbox:$('#wrap')});

3. Predefine the text of the tooltip:

$('#container').tooltip({text:'Hello World!'});

3.1. It can be even HTML formatted text:

$('#container').tooltip({text:'Hello <br /> World!'});

4. Predefine the attribute. Now the default REL is dismissed and the TITLE is considered for the tooltip:

$('#container').tooltip({attribute:'title'});

5. Default for image is not REL but the ALT attribute:

$('#my-img').tooltip();

6. Default for link is not REL, but the TITLE attribute:

$('.my-link').tooltip();

7. You can even add some links from the same class on the fly, but they are still working, because of the live event binding:

$('body').append('<a href="http://stoimen.com/" title="another link">some other link</a>');

Related posts:

  1. clickoutside jQuery plugin
  2. jQuery: Get the Selected Option Text
  3. jQuery browser and OS detection plugin
  4. 2xjQuery: Select a Selector

]]> /2010/02/16/jquery-tooltip-plugin/feed/ 1 Fancy tooltips with jQuery /2010/02/06/fancy-tooltips-with-jquery/ /2010/02/06/fancy-tooltips-with-jquery/#comments Sat, 06 Feb 2010 07:25:19 +0000 /?p=638 Continue reading Fancy tooltips with jQuery →
Related posts:
  1. jQuery tooltip plugin!
  2. clickoutside jQuery plugin
  3. Event driven programming with jQuery – (part 2). Events in jQuery.
  4. Firebug’s console.time() accuracy
]]> I was decided to write this post from long time ago and now I’m pretty sure it has to be published. What I see in my practice and my browsing in the web there are too many old fashioned tooltips all over the web, as web developer don’t know how to make pretty good fancy tooltips.

That’s why I decided to show what’s not and what is fancy tooltip, with the help of jQuery. Of course don’t hesitate to make with every other library or pure JS code.

What is NOT fancy?

It’s not fancy when the tooltip is with fixed position. In the example here I made one pretty small sample:

What is fancy?

In the other side you can make the tooltip moving with the mouse pointer which is way better, as you can see here:

Related posts:

  1. jQuery tooltip plugin!
  2. clickoutside jQuery plugin
  3. Event driven programming with jQuery – (part 2). Events in jQuery.
  4. Firebug’s console.time() accuracy

]]> /2010/02/06/fancy-tooltips-with-jquery/feed/ 2