GBrowse Popup Balloons

As of version 1.69 you can add popup balloon tips to GBrowse similar to the ones used by Google Maps. GBrowse can display popup balloons when the user hovers over or clicks on a feature. The balloons can display arbitrary HTML, either provided in the config file, or fetched remotely via a URL. You can use this feature to create multiple choice menus when the user clicks on the feature, to pop up images on mouse hovers, or even to create little embedded query forms. See http://mckay.cshl.edu/balloons.html for examples.

Balloon tooltips require a third-party package written by Sheldon McKay of CSHL. First go to

 Balloon Tooltips

Download the files prototype.js, balloon.js and yahoo-dom-event.js into $HTDOCS/gbrowse/js, where $HTDOCS is the directory in which your web server keeps its HTML documents.

Also get the balloon images from this page, create a "balloons" directory named $HTDOCS/gbrowse/images/balloons, and unpack the images into to this location.

Now, in the config file for the database you wish to modify, set "balloon tips" to a true value:

     [GENERAL]
     ...
     balloon tips = 1

Then add "balloon hover" and/or "balloon click" options to the track stanzas that you wish to add buttons to. You can also place these options in [TRACK DEFAULTS] to create a default balloon.

"balloon hover" specifies HTML or a URL that will be displayed when the user hovers over a feature. "balloon click" specifies HTML or a URL that will appear when the user clicks on a feature. Examples:

  balloon hover = <h2>Gene $name</h2>
  balloon click = <h2>Gene $name</h2>
        <a href=\'http://www.google.com/search?q=$name\'>Search Google</a><br>
        <a href=\'http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?db=pubmed&term=$name\'>Search NCBI</a><br>

Alternatively you can provide a URL to either option, in which case the contents of the URL will be fetched and displayed in the balloon. The balloon distinguishes URLs by looking for text beginning with "http:" "https:" or "ftp:"

balloon hover = http://www.wormbase.org/db/get?name=$name;class=gene

The usual option value substitution rules ($name, $start, etc) work with balloons, as do callbacks. GBrowse automatically escapes single (') and double (") quotes in the values returned by balloon hover and balloon click so that you don't have to worry about them messing up the HTML.

To customize the balloon, you may add a series of balloon config statements with "balloon settings" option as described in http://www.wormbase.org/wiki/index.php/Balloon_Tooltips#Customization using "balloon" as the name of the balloon. For example:

[General]
... other settings ...

balloon settings = balloon.balloonWidth     = '308px';
                   balloon.paddingTop       = '20px';
                   balloon.paddingLeft      = '15px';
                   balloon.paddingRight     = '15px';
                   balloon.paddingBottom    = '20px';
                   balloon.paddingConnector = '48px';

You may also change the images used to generate the balloon, for example to make the balloon wider than the default. You do that this way:

balloon settings =  balloon.balloonWidth = '500px'
                    balloon_upballoon = /images/balloons/big_up_balloon.png
                    balloon_downballoon = /images/balloons/big_down_balloon.png

The process of customizing the balloon appearance is described well in the Balloon_Tooltips pages at

 http://www.wormbase.org/wiki/index.php/Balloon_Tooltips

Currently there is no way of customizing balloons on a per-track basis. All balloons are affected in all tracks.