Snippets

Create an account or login to be able to add, comment and rate snippets.

Navigation

Popup tooltips

http://www.symfony-project.com/trac/ticket/540

Helper to work with http://tooltip.crtx.org Tooltip.js library (small js library that is using prototype and script.aculo.us, and so is the perfect match for symfony).

You will need to put that file into /helper/ directory, and put Tooltip.js (which you can get at the above-mentioned url) to the /sf/js/prototype/ directory.

Example of usage:

<?php use_helper('Tooltip') ?>
 
<?php echo tooltips_js('autoMoveToCursor=false showEvent=click', 'appear=true blindDown=true', 'blindUp=true', array('style.position' => 'absolute'), array('style.position' => 'absolute')) ?> 
 
<div id="some_id">some text</div>
 
<?php echo tooltip_div('some_id', 'css_class', array('style' => 'visibility: hidden'))?>
  Tooltip text.
</div>

Code is "phpdocumentor ready".

TooltipHelper.php as follows

<?php
 
require_once(sfConfig::get('sf_symfony_lib_dir').'/helper/JavascriptHelper.php');
 
 
/*
 * This file is part of the symfony package.
 * (c) 2006 Dmitry Parnas <parnas@rock.zp.ua>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
 
/**
 * TooltipsHelper.
 *
 * @package    symfony
 * @subpackage helper
 * @author     Dmitry Parnas <parnas@rock.zp.ua>
 * @version    
 */
 
/*
   Helpers to work with Tooltip.js [http://tooltip.crtx.org]
 */
 
 
/**
 * Builds open div tag ready with inforamtion for Tooltip.js
 *
 * Example:
 * <code>
 *   <?php echo tooltip_div('my_element_id', 'css_class_for_it', array('style' => 'visibility: hidden')) ?>
 * </code>
 *
 * @param string HTML id of the element this tooltip is for
 * @param css_class CSS class to skin tooltip in (if not default)
 * @param array Other attributes for the tag. You can also pass string suitable for _parse_attributes()
 *
 * @return string An HTML div string
 *
 */
function tooltip_div($element_id, $css_class = '', $options = array())
{                                                                                                                       
  $response = sfContext::getInstance()->getResponse();
  $response->addJavascript('/sf/js/prototype/prototype');
  $response->addJavascript('/sf/js/prototype/effects');
  $response->addJavascript('/sf/js/prototype/Tooltip');
 
  $options = _parse_attributes($options);
 
  $options['class'] = $css_class.' tooltip for_'.$element_id;
 
  return tag('div', $options, true);
}
 
 
 
/**
 * Builds script that sets optional settings for tooltips on the page.
 *
 * Example:
 * <code>
 *   <?php echo tooltips_js('autoMoveToCursor=false showEvent=click', 'appear=true blindDown=true', 'blindUp=true', array('style.position' => 'absolute'), array('style.position' => 'absolute')) ?>
 * </code>
 *
 * @param array Tooltip.js settings. You can also pass string suitable for _parse_attributes()   
 * @param array Ordered list of script.aculo.us effects you want to apply during tooltip show process. You can also pass string suitable for _parse_attributes()
 * @param array Ordered list of script.aculo.us effects you want to apply during tooltip hide process. You can also pass string suitable for _parse_attributes()
 * @param array Other settings for tooltip show process. You can also pass string suitable for _parse_attributes()
 * @param array Other settings for tooltip hide process. You can also pass string suitable for _parse_attributes()
 *
 * @return string An HTML script string.
 *
 */
function tooltips_js($options = array(), $show_effects = array(), $hide_effects = array(), $show_options = array(), $hide_options = array())
{
  $response = sfContext::getInstance()->getResponse();
  $response->addJavascript('/sf/js/prototype/prototype');
  $response->addJavascript('/sf/js/prototype/effects');
  $response->addJavascript('/sf/js/prototype/Tooltip');
 
 
  $options      = _parse_attributes($options);
  $show_effects = _parse_attributes($show_effects);
  $hide_effects = _parse_attributes($hide_effects);
  $show_options = _parse_attributes($show_options);
  $hide_options = _parse_attributes($hide_options);
 
  $code = '';
 
  foreach($options as $key => $value)
  {
    $value = _method_option_to_s($value);
 
    $value = (is_bool($value)) ? ($value === false) ? 'false' : 'true' : $value;
 
    $code .= '  Tooltip.'.$key.' = '.$value."\n";
  }
 
  $code .= _build_functions('show', $show_effects, $show_options);
  $code .= _build_functions('hide', $hide_effects, $hide_options);
 
  return javascript_tag($code);
}
 
 
function _build_functions($type, $effects = array(), $options = array())
{
  $code = '';
 
  if($effects) // there is no reason to build showMethod if there is no effects defined
  {
    $code .= '  Tooltip.'.$type.'Method = function (tooltip, options)'."\n";
    $code .= '  {'."\n";
 
    foreach($effects as $key => $value)
    {
      $code .= '    Effect.'.ucfirst($key).'(tooltip, options)'."\n";
    }
 
    if($options)
    {
      foreach($options as $key => $value)
      {
        $value = _method_option_to_s($value);
 
        $value = (is_bool($value)) ? ($value === false) ? 'false' : 'true' : $value;
 
        $code .= '    tooltip.'.$key.' = '.$value."\n";
      }
    }
 
    $code .= '  }'."\n";
 
    return $code;
  }
 
}
 
?>
by Adam Clarke on 2006-05-27, tagged helper  javascript  popup  tooltip 

Comments on this snippet

gravatar icon
#1 Russ Cann on 2006-05-27 at 08:46

This is pretty handy. Thanks for the snippet Adam.

since this is manually added to some symfony directories, rather than local to the app maybe fabien or francois can tell us if updating our symfony install when the next version arrives will break this functionality.

gravatar icon
#2 halfer on 2006-09-25 at 12:24

Thanks Adam. Dropped everything into place and it works like a charm. Just need to sort out my CSS and it will be all go. I think this should be a plugin for the new alpha currently in development!

gravatar icon
#3 HÃ¥kan Eriksson on 2006-10-10 at 01:44

Very handy indeed. However, note that since r2000 the /sf folder has been reorganised though, so editing the helper to reflect the new structure (/sf/prototype/js/***) might be a good idea :)

gravatar icon
#4 justim123 on 2006-10-13 at 04:40

Thanks

gravatar icon
#5 Marmeladov on 2006-10-13 at 08:31

Concerning the prototype inclusion, i think it's even better do do for example: $response->addJavascript(sfConfig::get('sf_prototype_web_dir').'/js/prototype'); In case the structure changes again.

gravatar icon
#6 Tiago Ribeiro on 2007-01-09 at 04:27

Thanks

gravatar icon
#7 Angelina Talley on 2007-10-18 at 08:41

I found that I had to change the following line:

require_once(sfConfig::get('sf_symfony_lib_dir').'/helper/JavascriptHelper.php');

To:

sfLoader::loadHelpers('Javascript');

To get it to work without errors in my dev environment.

You need to create an account or log in to post a comment or rate this snippet.