Qtip работает только с тегами ‹a href› и больше ни с чем, несмотря на чистые, отзывчивые консоли инструментов dbug.

Я загрузил Qtip на очень простую тестовую html-страницу, чтобы посмотреть, смогу ли я заставить ее работать. Он работает так, как задумано для тегов ‹ a >, но я не могу заставить его работать с любым другим элементом. Я поиграл с версией JQuery и различными селекторами и типами контента. Любые идеи о том, что я сделал неправильно здесь? Меня действительно сбивает с толку то, что он будет работать с НЕКОТОРЫМИ элементами, а не с другими.

Кроме того, теги h1/h2 будут генерировать нормальные всплывающие подсказки, поэтому, казалось бы, заголовки правильно отформатированы, они просто не вытягиваются в qtip.

Вот мой код внутри тела:

<h1 title='this is the h1 title'>I can haz a tooltip?</h1>
<h2 title='this is the h2 title'>this is an h2</h2>
<h2 title='this is the h2 title'>this is an h2</h2>
<h2 title='this is the h2 title'>this is an h2</h2>

<a href="" data-content='will this title change at all?'>here is a test link</a>
<a href="" data-content='will this title change at all?'>here is a test link</a>
<a href="" data-content='will this title change at all?'>here is a test link</a>
<a href="" data-content='will this title change at all?'>here is a test link</a>

А затем еще ниже, в конце страницы, вот моя логика jquery:

<script>
    $(document).ready(function(){
        $('a').qtip({   //DOES work correctly
            content: {
                text: function () {
                    return $(this).attr("data-content");
                } 
            }
        });

     $('h2').qtip({ // does NOT work
             content: {
                        text: 'does the h2 get a tooltip here yet'
                    }
        });

    $('h2').qtip(); //also tried this and does NOT work
    $('h1').qtip(); //also does not work


        console.log('I am ready now');
    });


 </script>