Flexslider - 当鼠标悬停在点上时，将图像名称显示为工具提示

Question

我在页面中使用http://flexslider.woothemes.com/ flex滑块插件。下面是我的flexslider代码：

<div class="flexslider">
    <ul class="slides">
        <li> <p> Apple</p><img src="apple.jpg"/> </li>
        <li> <p> Banana </p><img src="banana.jpg"/> </li>
        <li> <p> Orange </p> <img src="orange.jpg"/> </li>
    </ul>
</div>

flex滑块的Javascript代码，此代码用于在页面加载时初始化flex滑块。

这是我的flexslider加载功能：

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

我只想要两件事：

• 鼠标悬停在点（用于在幻灯片之间导航）时，工具提示应呈现并显示图像的名称。示例：橙色图像是@ 3rd slide，因此当用户鼠标悬停到该点工具提示时，应显示＆＃34; Orange＆＃34;同样适用于其他幻灯片。

• 当我点击一个点时，我应该能够传递名称图像来调用一个AJAX（java脚本）函数，一旦该函数完成，幻灯片应该得到渲染。

请帮我提供上述两个用例的解决方案。