Всплывающие подсказки в тексте ноды.

Продолжаем тему тултипов. В прошлой статье мы создали модуль-заготовку с помощью которого можно организовать вывод подсказок к элементам формы. Функционал модуля можно расширить, создав блоки для нескольких форм, выбор между которыми осуществляется с помощью инструкции switch
Такие тултипы зашиты в код, не нуждаются в каких либо изменениях и работают т.с. долго и счастливо. Но тем не менее востребованность такого решения не очень большая. Гораздо востребованнее является функционал, позволяющий создавать всплывающие подсказки, или выводить цитаты, динамически и размещать их прямо в тексте. 
Так при создании объемных статей, в которых используется множество цитат и ссылок на источники, подобные эелементы, будучи размещены в самом тексте делают его неудобочитаемым. Будучи собраны в конце статьи, несказанно раздражают необходимостью каждый раз искать нужную цитату, а потом также искать место на котором прервано чтение. Было бы очень удобно просматривать цитаты и прочую справочную информацию во всплывающем окне.
После таковых раздумий, было решено попробовать реализовать описанную выше задачу. 
Использованный нами ранее JS скрипт и в данном случае также может быть использован, поэтому не будем копаться в сети, в поисках чего либо покруче. По крайней мере, сделаем это позже.
Поскольку речь идет уже не о формах, а о страницах документов, то имеет смысл не ограничивать подгрузку JS и CSS файлов лишь некоторыми страницами, так как в любом случае кол-во страниц, где в этих файлах будет необходимость, значительно больше, чем тогда когда мы имели дело только с 2-3 страницами форм. Соответственно.... в начале кода нашего модуля подгружаем данные файлы

//определяем путь к модулю
$path_tool = drupal_get_path('module', 'tooltips'); 
//создаем переменную пути для css файла
$path_tool_st = $path_tool . '/css/stickytooltip.css';
//создаем переменную пути для js файла
$path_tool_js = $path_tool . '/js/stickytooltip.js';
//подгружаем css
drupal_add_css($path_tool_st);
//подгружаем js
drupal_add_js($path_tool_js);
Теперь остается разместить в нужных местах страницы нужный html код. Т.е. создать ссылку вызова тултипа, сам тултип и контейнер, в котором должны находиться все тултипы данной страницы. Понятное дело, копаться с кодом не очень удобно, да и визуальные редакторы, как им и положено, рубят html на корню. В крайнем случае, заменяют специальные символы на escape последовательности.
Поэтому нужно найти способ упростить создание упомянутых выше элементов. Вариантов может и не великое множество, но точно больше одного. В целях повышения образованности, используем не самый оптимальный, но тем не менее вполне работоспособный вариант, а именно, токены.
Здесь уже не обойтись т.с. своими силами и нам понадобятся модули Token и Token filter. Первое что необходимо сделать, это указать зависимости в .info файле нашего модуля. 
name = Tooltips.
description = Выводит сообщение во всплывающем окне.
package = My_modules
core=7.x
version = "7.x-1.x-dev"
project = "tooltips"
datestamp = "1332419400"
dependencies[] = token
dependencies[] = token_filter
Указание зависимости необязательно и наш модуль будет работать и без него, но сделать это необходимо, чтобы в дальнейшем не сходить с ума от того, что не работает проверенный-перепроверенный копеечный код на 5 строк. А при указанных зависимостях наш модуль просто не включится, если модулей от которых он зависит нет, или они отключены.
Далее прикидываем как организовать построение html кода. Структура кода с которым работает наш скрипт такова...
 <b data-tooltip="sticky1">Текст вызова</b> <!-- строка вызова тултипа -->

<div id="mystickytooltip" class="stickytooltip"><div style="padding:5px"><!-- определение контейнера -->
<div id="sticky1" class="atip" style="width:200px"><!-- определение содержания тултипа -->
Здесь содержание тултипа
</div></div>
<div class="stickystatus"></div></div><!-- строка статуса и закрытие контейнера -->​
Т.е. по большому счету, для реализации нашей задачи нам понадобится 6 токенов. Вполне приемлемо. Итак...
На создание ссылки вызова - 2 токена. Также 2 на создание самого тултипа и 2 на создание контейнера.
Два токена будут динамическими. В них будем указывать идентификатор тултипа.
Создаем токены.... 
/**
 * Implements hook_token_info().
 */
function tooltips_token_info() {
  // Создаем новый тип (раздел)
  $ttype['types']['tooltips'] = array(
    'name' => t('Tooltips module'),
    'description' => t('Tooltips module tokens'),
  );
  // Создаем статический токен ссылки вызова тултипа (закрывающий тег)
  $ttype['tokens']['tooltips']['cl'] = array(
    'name' => t('Tooltips close tag'),
    'description' => t('Tooltips close tag'),
  );
  // Создаем динамический токен. Вводим ID тултипа (Открывающий тег)
  $ttype['tokens']['tooltips']['op'] = array(
    'name' => t('Tooltip open tag'),
    'description' => t('Enter any descriptor 3-5 latin simbols'),
    'dynamic' => TRUE,
  );
// и так далее........
 
return $ttype;
}

Теперь нужно определить значения токенов.....
/**
 * Implements hook_tokens().
 */
function tooltips_tokens($type, $tokens) {
  $replacements = array();
  //определяем содержимое токенов 
  //динамических
  if ($type == 'tooltips') {
        //токен [tooltips:op] 
    if ($created_tokens = token_find_with_prefix($tokens, 'op')) {
      foreach ($created_tokens as $id4 => $original) {
        $replacements[$original] = '<b class="tool" data-tooltip="'.strip_tags($id4).'">';
      }
    }
    //токен [tooltips:to]
    if ($created_tokens = token_find_with_prefix($tokens, 'to')) {
      foreach ($created_tokens as $id5 => $original) {
        $replacements[$original] = '<div id="'.strip_tags($id5).'" class="atip" style="width:350px">';
      }
    }
    //статических
        foreach ($tokens as $name => $original) {
         switch ($name) {
        case 'cl':
           $replacements[$original] = '</b>';
          break;
        case 'ow':
           $replacements[$original] = '<div id="mystickytooltip" class="stickytooltip"><div style="padding:5px">';
          break;
        case 'cw':
          $replacements[$original] = '</div><div class="stickystatus"></div></div>';
          break;
        case 'tc':
          $replacements[$original] = '</div>';
          break;
        }
      }
  }
  return $replacements;
}
В данном случае привожу полный фрагмент кода. Сбрасываем кэш. В противном случае, свои токены мы врядли увидим, а увидеть их можно здесь admin/help/token .
Теперь рассмотрим как использовать данный функционал. Ссылки вызова тултипов создаются так
[tooltips:op:key]Lorem[tooltips:cl] ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean [tooltips:op:key1]commodo[tooltips:cl] ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.  
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

На странице это выглядит так

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.  Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Собственно тултипы создаются в конце страницы и выглядит это так
[tooltips:ow]
[tooltips:to:key]
Это текст тултипа. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit.
[tooltips:tc]
[tooltips:to:key1]
Это текст тултипа1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies 
nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
[tooltips:tc]
[tooltips:cw]
В начале и конце блока токены контейнера, внутри которого и размещаются тултипы. Сам контейнер на странице не отображается.
Вот собственно и все. Остается напомнить, что для нормальной работы работы модуля, в одном из форматов ввода нужно включить фильтр Replace tokens . Соответственно, доступ к созданию тултипов определяется наличием доступа к данному формату ввода.

Модуль, как обычно, в аттаче.

Успехов!
ВложениеРазмер
Файл tooltips.rar3.41 KB