В своем блоге использую Material Design Lite
(от англ. Material Design Lite - Материальный дизайн облегченный)
, с его помощью можно легко использовать компоненты в стиле материального дизайна. Например всплывающие подсказки.
В одном из постов пришлось вставлять много аббревиатур и терминов. Если писать все всплывающие подсказки руками на HTML
(от англ. HyperText Markup Language — «язык гипертекстовой разметки»)
, это бы заняло много времени. Для сокращения ручного труда решено было использовать файлы данных Jekyll и написать Liquid плагин для парсинга тэгов с подсказками.

Пример моего Liquid тэга:

{% tooltip HTML;{{ dict['HTML'].fullname }} %}

Текст плагина (_plugins/tooltip.rb):

module Jekyll
  class Tooltip < Liquid::Tag

    def initialize(tag_name, input, tokens)
      #super
      @input = input
    end


    def render(context)
        #Парсим входящую строку, иначе переменные liquid попадут как простой текст
        rendered_input = Liquid::Template.parse(@input).render(context)

        #Разбиваем строку по разделителю
        input_split = split_params(rendered_input)
        tooltip_name = input_split[0].strip
        #Проверяем ести ли второй параметр
        if( input_split.length > 1 )
          tooltip_text = input_split[1].strip
        end

        #Случайное число для id элемента
        rId = Random.rand(10000...42000)

        #Формируем выходную строку
        output = "<span class=\"plTooltip\" id=\"#{rId}\">#{tooltip_name}</span><div class=\"mdl-tooltip\" for=\"#{rId}\">#{tooltip_text}</div>"

        return output
    end

    def split_params(params)
        params.split(";")
    end

  end
end

Liquid::Template.register_tag('tooltip', Jekyll::Tooltip)

Стиль слова с подсказкой:

.plTooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted rgb(0, 109, 140);
}

Пример файла данных (распологается в каталоге _data/plDictionary.yml):

СКС:
  fullname: Структурированная кабельная система
  description: Законченная совокупность кабелей связи и коммутационного оборудования, отвечающая требованиям соответствующих нормативных документов. Включает набор кабелей и коммутационных элементов, и методику их совместного использования, позволяющую создавать регулярные расширяемые структуры связей в локальных сетях различного назначения

ИБП:
  fullname: Источник бесперебойного питания
  description: Вторичный источник электропитания, предназначенный для электропитания при кратковременном отключении основного источника электропитания, а также для защиты от существующих помех в сети с сохранением допустимых параметров для сети основного источника. В качестве основного источника (первичного) может использоваться электропитание, поступающее от электросети или генератора.

Пример использования:

{% assign dict = site.data.plDictionary %}

<h5>Этап 2. Внедрение</h5>
<ul>
    <li>Создание инженерных систем и СКС. {% tooltip СКС;{{ dict['СКС'].fullname }} %} – это совокупность слаботочных и силовых (электрических) сетей. В рамках создания инженерных систем производится прокладка, монтаж кабельных трасс, установка розеток, кроссирование патч-панелей, разводка и подключение электрических сетей, оборудование серверной комнаты, создание систем вентиляции и кондиционирования, установка систем бесперебойного питания ({% tooltip ИБП;{{ dict['ИБП'].fullname }} %}).</li>
Этап 2. Внедрение
  • Создание инженерных систем и СКС. СКС
    Структурированная кабельная система
    – это совокупность слаботочных и силовых (электрических) сетей. В рамках создания инженерных систем производится прокладка, монтаж кабельных трасс, установка розеток, кроссирование патч-панелей, разводка и подключение электрических сетей, оборудование серверной комнаты, создание систем вентиляции и кондиционирования, установка систем бесперебойного питания (ИБП
    Источник бесперебойного питания
    ).

Ссылки