Реализация меню с применением плагина Bettertip

Всем привет. У меня не столько вопрос, а скорее всего нужен совет. Суть в том что у меня есть сайт с сериалами, и решил сделать отдельное меню для всех сериалов с группированием в блоки по алфавиту, плюс при помощи плагина Bettertip выводится всплывающая подсказка. Признаюсь честно что подсмотрел все это дело на сайте seasonvar.ru. И вопрос стал в том, каким способом загружать контент для всплывающей подсказки, и на данный момент придумал несколько вариантов реализации задуманного, ниже обо всем по порядку.
Вариант №1:

            <div class="abc-block">
            <div class="abc-letter"><span>А</span><b></b></div>
        <div class="betterTip" id="div1">
            <a id="a1" data="документ.html" href="ссылка на сериал" class="betterTip abc-link">А-название сериала</a>
        </div>
        </div>

Контент для подсказки загружается с документа (на примере это документ.html), соответственно для каждого сериала нужно создавать отдельную странницу с нужной инфой для подсказки, а сериалов уже больше 1000 и это количество будет расти. Пробовал как вариант указать адрес странницы сериала, но не выводит, да и там слишком много инфы для всплывающей подсказки (коменты, видео, и т.д.)

Вариант №2:

            <div class="abc-block">
            <div class="abc-letter"><span>А</span><b></b></div>
                <div class="betterTip" id="div1">
            <a href="ссылка на сериал" class="abc-link">А-название сериала</a>
            <a id="a1" href="$a2?width=250" class="betterTip" title="А-название сериала"></a>
        </div>
        <div id="a2" style="display:none">
        <table width="100%"  border="0" cellpadding="3" cellspacing="0">
          <tr>
            <td valign="top" align="center" height="200" >
                <img src="ссылка на изображение" height="200" width="154" style="border: 5px white solid;">
            </td>
            <td valign="top" align="left">
                Описание.......
                        ..........................
                        .............................
                <br>
                <span style="color: #be0750;">Год выхода:</span> 2011<br>
                <span style="color: #be0750;">Жанр:</span> жанры..................<br>
                <span style="color: #be0750;">Сезонов:</span> 4
            </td>
          </tr>
    </table>
        </div>
        </div>

Контент для подсказки загружается с другого элемента страницы, на примере содержимое подсказки загружается с содержимого блока у которого id=a2. Снова же как минус данного варианта что его реализация займет много времени на заполнение, к тому же вес странницы со всеми сериалами будет немаленький.

Вариант №3:

             <div class="abc-block">
            <div class="abc-letter"><span>А</span><b></b></div>
            {custom id="1200,74,1095,731,641,1231,1070,356,598,759," template="abcblock" cache="yes"}
        </div>
            <div class="abc-block">
            <div class="abc-letter"><span>Б</span><b></b></div>
            {custom id="315,992,418,102,320,1002,863,718,451,113,800,1033,1211,1171,722,572,711,742,1134,767,571,727,311,1154,717,817,1102,924,678,701,1004,214,733" template="abcblock" cache="yes"}
        </div>

Контент для подсказки загружается с помощью тега custom (dle 9.7) и шаблона abcblock, самый простой способ, но в то же время при таком способе будет большая нагрузка на базу данных, так как для каждой буквы алфавита отдельный тег custom, и в сумме их будет 32, а это по моему перебор. Хотя этот метод для меня самый идеальный, за минусом нагрузки. Хотя все кешируется... но во время очистки кеша будет конечно жесть.

Вариант №4:
Такая же реализация, только с помощь Block.Pro2, тут все думаю так же как и с тегом custom, минус это нагрузка.

Друзья подскажите как лучше сделать, может есть у кого другие идеи или правка вышеприведенных вариантов.

Заранее спасибо всем за любую помощь.

P.S. Если в реализации много ошибок, то прошу сильно не пинать, так как опыта у меня пока что не так много.