How can I add help tips on each page, like a sliding panel?

Question

Is there any module I can use to insert in every page info about the specific page. I could use something like a sliding panel, or a popup. I need the content of that, block or popup or whatever it is, to be translatable. I found this link, but it needs much custom code, which I would like to avoid.

Answer 1

It sounds as if https://drupal.org/project/popup may be suitable for for your needs.

You could create a block with various contexts (your translations / page) and then use this module to display the block (using sub module 'Popup Block') on each page when the user requests it, by rollover or click or whatever you choose.

The module is mature, widely used, has a recent version and has documentation provided.

Answer 2

We decided to make a custom implementation. In order to answer to @Molot and whomever might find it useful below is a description of our implementation.

1) We already had, for another purpose, an implementation that sets variables (with variable _set). The valiable name is a label and the variable value is a node id. Also we already had a very simple form which populates the variables. I guess a custom table could also be used. 2) We created nodes(which are translatable) for each help text we wanted to display help info. I added those ids, along with a label to the variables above. 3) In the share tools div of our pages, we added the info image and a div with the help text, which was by default hidden. With javascript, on click the help text is displayed. and Some code:

function _share_output() {
  global $theme;
  global $base_root;
  global $base_url;
  global $user;

  $output = '';
  $main_url = $base_root . request_uri();
  $path = $base_url . '/' . drupal_get_path('theme', $theme);
  $output = '<ul id="share" class="share_tools pull-right">';
  $output .= '<li>';
  if ($user->uid == NULL) {
    $title = drupal_get_title();
    $output .= '<a title="' . t('Email this to a friend.') . '" href="mailto:?subject=' . $title . '&body=' . $main_url . '" class="share-email"><img width="24" alt="' . t('Email this to a friend') . '" height="18" src="' . $path . '/images/email.png"/></a>';
    $output .= '&nbsp;&nbsp;';
    $output .= '<a title="' . t('Share on Twitter') . '" target="_blank" href="http://twitter.com/share?text=' . $title . '&url=' . $main_url . '" class="twitter-share-button" data-count="none"><img width="24" alt="' . t('Share on Twitter') . '" height="18" src="' . $path . '/images/tweet.png"/></a>';
    $output .= '&nbsp;&nbsp;';
    $output .= '<a title="' . t('Share on Facebook') . '" target="_blank" href="https://facebook.com/sharer.php?u=' . $main_url . '" class="facebook-share-button" data-count="none"><img width="24" alt="' . t('Share on Facebook') . '" height="18" src="' . $path . '/images/fb.png"/></a>';
  }
  // THIS is where we display the info image next to the other share images.
  $info_content = mymodule_blocks_info_content();
  if (!drupal_is_front_page() && !empty($info_content)) {
    $output .= '&nbsp;&nbsp;';
    $output .= '<a title="' . t('Info') . '" href="#" class="info_toggle"><img width="24" alt="' . t('Help') . '" height="20" src="' . $path . '/images/info.png"/></a>';
  }
  $output .= '</li>';
  // THIS is where we hide the info help text.
  $output .= '<li id="infobox_text" style="display:none">' . $info_content . '</li>';
  $output .= '</ul>';
  return $output;
}

function mymodule_blocks_info_content() {
  $info_content = "";
  $title = drupal_get_title();
  $menu_node = menu_get_object();
  $label = "";
  // Get the label to use, according to which page you are.
  if ($title == 'Search') {
    $label = 'search';
  }
  elseif (isset($menu_node) && is_object($menu_node) && $menu_node->type == 'MY_NODE_TYPE') {
    $label = 'MY_NODE_TYPE';
  }
  //and so on.........
   $info_content = load_info_by_label($label);
   return $info_content;  
}

function load_info_by_label($label) {
  global $language;
  $user_language = 'en';
  $content = "";
  // Get the logged in user language.
  if ($language != NULL && !empty($language->language)) {
    $user_language = $language->language;
  };
  //Get the English(default) nid(which is found by the label in the custom table) body content.
  // The function below is a simple function that uses variable_get($label), to get the variable value.
  $content_en_nid = get_system_resource($label);
  if ($content_en_nid != null && !empty($content_en_nid)) {
    $nid = $content_en_nid;
    if ($user_language !== 'en') {
      // Get the tranlations.
      $node_translations = translation_node_get_translations($content_en_nid);
      // If thranslations exist and a translation exist for the user language, get that nid
      if ($node_translations != null && isset($node_translations) && !empty($node_translations) && array_key_exists($user_language, $node_translations)) {
        $nid = $node_translations[$user_language]->nid;
      }
    }
    // LOad te node and get the body value where the help text is stored.
    $node = node_load($nid);
    if ($node && isset($node)) {
      $content = $node->body[LANGUAGE_NONE][0]['value'];
    }
  }
  return $content;
}
//The javasctipt to show hide the help text.
$(".info_toggle").click(function(){
    $("#infobox_text").addClass('pull-right').toggle();
});

//Some CSS
#infobox_text {
    position: relative;
    float: right;
    right: -18px;
    background: #FF6600;
    color: #FFFFFF;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    width: auto;
    padding: 20px;
    z-index: 999;
    line-height: 20px;
    top: 4px;
}

#infobox_text:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 9px 14px;
    border-color: #FF6600 transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -14px;
    right: 19px;
    top: -11px;
}

.info_toggle {
    position:relative;
}
.info_toggle img {
    border-radius:50%;
    width:18px;
    height:auto;
}