Как добавить заголовок во всплывающую подсказку, когда я получаю контент из скрытого div (в отличие от атрибута title) - PullRequest
Новая
       22

Как добавить заголовок во всплывающую подсказку, когда я получаю контент из скрытого div (в отличие от атрибута title)

0 голосов
/ 03 января 2012

Я использую cluetip , который прекрасно работает, но содержание одной из моих подсказок становится очень большим, поэтому я хочу переместить его из локального атрибута title в отдельный и скрытый div.

Это прекрасно работает, за исключением того факта, что я не могу понять, как добавить заголовок в подсказку. Когда у меня было содержимое атрибута title, здесь был код моей подсказки: 

$('#subscribe').cluetip({
    cluetipClass: 'jtip',
    activation: 'click',
    topOffset: 10,
    leftOffset: -175,
    splitTitle: '|',
    sticky: true,
    closePosition: 'title',
    arrows: true
});

и вот мой новый код со скрытым div: 

$('#subscribe').cluetip({
    local:true,
    cluetipClass: 'jtip',
    activation: 'click',
    topOffset: 10,
    leftOffset: -175,
    sticky: true,
    closePosition: 'title',
    arrows: true
});

Как вы можете видеть splitTitle: '|' исчезает и local: true добавляется (как кажется, что подсказка пуста, если я включаю "splitTitle" при использовании local : true.

Учитывая то, что я не могу использовать splitTitle, как я могу иметь заголовок в верхней части подсказки подсказки, когда я получаю подсказку из скрытого div? В демонстрационном примере на веб-сайте ни один из примеров, в которых используются скрытые div, не имеет заголовка.

Ответы [ 3 ]

1 голос
/ 17 января 2012

Вы можете установить атрибут заголовка всплывающей подсказки, установив атрибут title в элементе запуска всплывающей подсказки. Так что ваш HTML будет выглядеть как 

<!-- your trigger -->    
<a class="load-local" href="#loadme" rel="#loadme" title="Put your tooltip title here">
    I trigger tooltip
</a>
<!-- your local tooltip -->
<div id="loadme">
    this is hidden local content
</div>
1 голос
/ 18 января 2012

Как сказал Михал, вот решение:

http://jsfiddle.net/adaz/6jfDc/

0 голосов
/ 03 января 2012

Вы не можете использовать плагин как есть.

Плагин генерирует следующую HTML-разметку: 

<div id="cluetip">
    <div class="cluetip-outer">
        <h3 class="cluetip-title />
        <div class="cluetip-inner" />
    </div>
</div>

Просмотр исходного кода плагина ( GitHub ): 

/***************************************
* load an element from the same page
***************************************/
      } else if (opts.local) {
        var $localContent = $(tipAttribute + (/^#\S+$/.test(tipAttribute) ? '' : ':eq(' + index + ')')).clone(true).show();
        if (opts.localIdSuffix) {
          $localContent.attr('id', $localContent[0].id + opts.localIdSuffix);
        }
        $cluetipInner.html($localContent);
        cluetipShow(pY);
      }
    };

«Локальный контент» (от вашего div в вашей ситуации) добавляется к $cluetipInner, который является элементом div.cluetip-inner. Элемент <h3> полностью игнорируется.

Примечание: об опциях splitTitle в документации сказано:

splitTitle: если используется, подсказка будет заполнена только атрибутом title

...