Wardlaw Claims Service Company Blog: Wijmo

Monday, February 28, 2011

Providing Default Values to Wijmo Tooltips

The Wijmo Tooltip widget has certain properties set to default values. Developers may find that these defaults are not appropriate for the web site we are using them in. In this post I will demonstrate how to provide your own default options for the Wijmo Tooltip widget without modifying the Wijmo source code. This will allow you to attach tooltips to your markup without needing to duplicate the options object you provide on every page.

By default the display of the tooltip will include a callout element. This is the wedge that points the tooltip bubble to the element the tooltip is associated with. Below is a screenshot of a tooltip which includes the callout.

If I want to omit the callout element I can do so by using the showCallout option and setting the value to false. Rather than include this option everytime the tooltip is used I can add a JavaScript file that will override the default options for the tooltip. Below is the content of the file.

jQuery(document).ready( function() {
 jQuery.extend( jQuery.wijmo.wijtooltip.prototype.options, { showCallout: false } );
});

Note that I have used jQuery's extend method to merge my default values into those used by the Wijmo tooltip.

Here is a screenshot of the tooltip without the callout.

I will need to include the file which includes my custom configuration after the Wijmo tooltip file is included. Below is the complete HTML code for the example. Note that the "custom-options.js" file is included after the usual jQuery and Wijmo files. This will cause any Wijmo tooltips included on the page to use the new default settings which will not display the callout element. I would include this JS file on every page of my site that uses Wijmo in order to set my own default values without modifying the Wijmo source code.

<!doctype html>
<html>
<head>
 <title>Wijmo Tooltip - Set Defaults</title>
 <link type="text/css" rel="stylesheet" href="jquery.ui.all.css">
 <link type="text/css" rel="stylesheet" href="jquery.wijmo-open.1.1.2.css">
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="jquery-ui-1.8.7.custom.min.js"></script>
 <script type="text/javascript" src="jquery.wijmo-open.1.1.2.min.js"></script>
 <script type="text/javascript" src="custom-options.js"></script> 
</head>
<body>

<h1>Weather Tooltip - Customized Defaults</h1>

<div>
 <ul id="cityList">
  <li data-zipcode="78701"><span class="x-tooltip">Austin, TX</span></li>
  <li data-zipcode="75210"><span class="x-tooltip">Dallas, TX</span></li>
  <li data-zipcode="76710"><span class="x-tooltip">Waco, TX</span></li>
 </ul>
</div>

<script type="text/javascript">
 
 jQuery(document).ready(function() {

  jQuery("#cityList>li>span.x-tooltip").each(function() {

   var item = jQuery(this);

   item.wijtooltip({ content: item.parent().attr("data-zipcode") });

  });
    
 });

</script>

</body>
</html>

References

Wijmo - The Wijmo JavaScript and CSS files are available at the Wijmo website, as are the required jQuery files.
http://www.wijmo.com

Wednesday, February 16, 2011

Adding HTML Content to Wijmo Tooltip with AJAX

In this post I will demonstrate how the Wijmo Tooltip widget can be used to display HTML content retrieved using AJAX. Wijmo is a JavaScript widget library built on jQuery. Parts of Wijmo, including the tooltip, are free/open-source. This simple demo will display a list of cities. When the mouse is hovered over a city a tooltip containing the temperature will be displayed. The content of the tooltip is populated from HTML queried by jQuery's AJAX functions.

Here is a screen shot of the page viewed in the browser.

Next is the HTML markup, without the JavaScript used for the AJAX calls.

<!doctype html>
<html>
<head>
<title>Wijmo Tooltip AJAX Demo</title>
<link type="text/css" rel="stylesheet" href="jquery.ui.all.css">
<link type="text/css" rel="stylesheet" href="jquery.wijmo-open.1.1.2.css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="jquery.wijmo-open.1.1.2.min.js"></script>
</head>
<body>

<h1>Weather Tooltip via AJAX</h1>

<div>
<ul id="cityList">
<li data-zipcode="78701"><span class="x-tooltip">Austin, TX</span></li>
<li data-zipcode="75210"><span class="x-tooltip">Dallas, TX</span></li>
<li data-zipcode="76710"><span class="x-tooltip">Waco, TX</span></li>
</ul>
</div>


</body>
</html>

This is pretty simple markup. Note that I have used HTML 5 data-* attributes to associate a zip code with each list item element. Also note that Wijmo has dependencies on jQuery JavaScript and CSS files which I have referenced in the head section.

Next is the JavaScript that is used to create the tooltips.

jQuery(document).ready(function() {
  jQuery("#cityList>li>span.x-tooltip").each(function() {

   jQuery(this).wijtooltip({

      ajaxCallback: function () {    

      var item = this;  // give this an alias so we can refer to it in scope of Ajax call below

      jQuery.ajax({
       url: "weather.aspx" 
       , data: { zipcode: item.parent().attr("data-zipcode")  } //get the zip code from the li wrapping the span
       , success : function(data) { item.wijtooltip("option", "content", data);  } 
       , dataType: 'html' 
       , type: "GET"
      });                  
                 } 
    });
  });
 });

The selector #cityList>li>span.x-tooltip is used to get the SPAN elements I wish to provide a tooltip for. The ajaxCallback function option of the wijtooltip function is used to specify the AJAX call used to retrieve the HTML content and populate the tooltip content when the tooltipis shown. The data option of jQuery's ajax method gets the desired zip code value from the parent list item's data attribute.

Here is an example of the HTML resulting from a call to the weather.aspx page.

<!doctype html>
<html>
<head>
 <title>Weather</title>
</head>
<body>
Currently <span id="temp">63</span>&deg;
</body>
</html>

References
Wijmo - The Wijmo JavaScript and CSS files are available at the Wijmo website, as are the required jQuery files.
http://www.wijmo.com