How do I make pager hover on bxslider?

Question

I am using bxslider content slider. I want to get a tooltip saying the heading of the slide when I hover my mouse on pager.

here is my JSFiddle.

So suppose if I hover on pager1, it should say slide1, when I hover on pager 4, it should say Slide4.

I tried but it broke the slider. Here is the code which I tried.

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

Answer 1

You are missing a 'r' in attr and your syntax is wrong.

Try this code.

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

JSFiddle

EDIT: For tooltip on pager, you need to do this,

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: Don't forget to write "data-slide-index" in . More