javascript - qTip 和动态内容

标签 javascript html qtip

我是 JavaScript 和 qTip 的新手,我无法做某事。我有一个包含图像的表格,我需要一个带有每个图像描述的 qTip。我从数据库加载图像和内容。我怎么写这个?从我读过的内容来看,我需要将描述添加到隐藏的 div 并从 JavaScript 函数访问 div。唯一的问题是我不知道怎么做。寒冷,请告诉我如何做到这一点?

最佳答案

假设您的 HTML 标记大致如下所示:

<td>
    <img title="First img">
</td>
<td>
    <img title="Second img">
</td>

以下是您可以执行的操作:

$('td').each(function() {
    var img = $('img', this);
    $(this).qtip({
        content: img.attr('title'),
        show: 'mouseover',
        hide: 'mouseout',
        position: {
             target: 'topMiddle',
             tooltip: 'bottomMiddle'
        }
    });
});

想法是遍历所有 holder,获取底层图像和工具提示内容(在本例中为 img.attr('title'))并使用此自定义 内容生成工具提示

关于javascript - qTip 和动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11610400/

相关文章:

javascript - 带有 bxSlider 的 jQuery qTip

javascript - React-Router:将 props 传递给 React-Router ^2.0.0 中的嵌套路由组件的最佳方法?

javascript - 我可以将用户提供的 Javascript 可用的库列入白名单吗?

html - 自定义 CSS 输入字段问题

html - 获取显示 block 的背景颜色以仅填充在文本后面

jquery - 如何使 qtip 工具提示随光标移动

javascript - PHP/JS Froala 图片上传无法正常工作

javascript - 在消息传递模式架构下与事件一起传递的数据

javascript - 如果按 Interval(Continue btn) 两次或更多次,则 AnglularJS Interval 不会暂停

jquery - qtip2 - 单击事件在第一次单击时不起作用