Как заставить пейджер зависать на bxslider?

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

вот мой JSFiddle.

Итак, предположим, что если я наведу курсор на пейджер1, он должен сказать «Слайд1», когда я наведу курсор на пейджер 4, он должен сказать «Слайд4».

Я пытался, но это сломало ползунок. Вот код, который я пробовал.

$('.bx-pager-link').on("mouseenter", function()({
$('.bx-pager-link').att("title = '.heading'");
});

pager bxslider jquery-hover
person user3365207    schedule 07.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам не хватает 'r' в атрибуте, и ваш синтаксис неверен.

Попробуйте этот код.

$('.bx-pager-link').on("mouseenter", function(){
$('.bx-pager-link').attr("title", "This is a title");
});

JSFiddle

EDIT: для всплывающей подсказки на пейджере вам нужно сделать это,

JS:

var slider = $('.bxslider').bxSlider({
   pager: true,
   pagerCustom: '#bx-pager',
)};

HTML:

<div id = "bx-pager">
    <li>
        <a data-slide-index="0" title = "Tooltip text goes here" class = "slide" href="">
            Slide1
        </a>
    </li>
    <li>
        <a data-slide-index="1" title = "Tooltip text goes here" class = "slide" href="">
            Slide2
        </a>
    </li>
    <li>
        <a data-slide-index="2" title = "Tooltip text goes here" class = "slide" href="">
            Slide3
        </a>
    </li>
    <li>
        <a data-slide-index="3" title = "Tooltip text goes here" class = "slide" href="">
            Slide4
        </a>
    </li>
</div>

PS: Не забудьте написать «data-slide-index» в . Ещё

person user2798227    schedule 10.03.2014
comment
но он по-прежнему не отображает содержимое div во всплывающей подсказке ?? - person user3365207; 10.03.2014