Flexslider-在鼠标悬停在点上时显示工具提示 [英] Flexslider - show tooltip while mouse hover on dots

问题描述

我在我的页面中使用 http://flexslider.woothemes.com/ Flex滑块插件.

I am using http://flexslider.woothemes.com/ flex slider plugin in my page.

Below is my code for flexslider:

html: 
<div class="flexslider">
    <ul class="slides">
        <li>Image 1</li>
        <li>Image 2</li>
        <li>Image 3</li>
    </ul>
</div>

js: java script code for flex slider and this code is used to initialize the flex slider while page load.

    $(window).load(function() {
            $('.flexslider').flexslider({   
                animation: "slide",
                slideshow: false,
                controlNav: true,
                directionNav: false,
                easing: "swing"
            });
        });

全部，我想要的是当我将鼠标悬停在点上(用于在幻灯片之间导航)时，工具提示应该重新显示，并显示某种信息，例如幻灯片编号".

All, I want is when I mousehover to dots (which used for navigation among slides) a tooltip should reneder and show some kind of message say "Slide number".

推荐答案

按照RRR的建议，我在每个点上都添加了title.

As suggested by RRR, I have added title to each of the dots.

$(".flexslider ol li a").each(function(index){
   $(this).attr("title","slide number "+(index+1));
});

请参阅此小提琴

这篇关于Flexslider-在鼠标悬停在点上时显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！