Question

任何人都可以指出我正确的方向。我一直在寻找，但无法找到如何为动态生成的数据添加工具提示。例如，我正在制作一个显示电影片名的mysql结果列表，并希望有一个工具提示，当鼠标悬停在鼠标悬停上时会提供像导演，演员等额外信息。每次都会生成电影标题的随机列表。

我知道如何向静态数据添加工具提示，但如何动态添加工具提示？

任何正确方向的指针或推都都会受到赞赏。

Answer 1

我在PHP中使用了Prototip 2，其中提示是在生成页面时动态生成的。

基本上我有这个代码，它为数据库中的一堆不同项创建了一堆工具提示。此代码是整个页面的HTML的一部分。这恰好在zend框架视图脚本中，但是是通用的。

<?php foreach($this->items as $item): ?>
<?php if ($item['statusText'] != ''): ?>

tips.push(
        new Tip('led_<?php echo $item['boxsn']; ?>', '<?php echo $item['statusText']; ?>', {
stem: 'leftMiddle',
hook: { target: 'rightMiddle', tip: 'leftMiddle' },
style: 'protoblue',
offset: { x: 5, y: 0 }
})
);
    <?php endif; ?>
    <?php if ($item['alarms'] != ''): ?>

    tips.push(
        new Tip('alarm_<?php echo $item['boxsn'] ?>',
                '<?php echo $item['alarms'] ?>', {
            stem: 'leftMiddle',
            hook: { target: 'rightMiddle', tip: 'leftMiddle' },
            style: 'protoblue',
            offset: { x: 5, y: 0 }
        })
    );
    <?php endif; ?>
<?php endforeach; ?>

对于我创建的每个工具提示，我的输出类似于以下内容：

tips.push(
    new Tip('led_091133000039', 'Item has not functioned since 02/03/12 01:30 PM', {
        stem: 'leftMiddle',
        hook: { target: 'rightMiddle', tip: 'leftMiddle' },
        style: 'protoblue',
        offset: { x: 5, y: 0 }
    })
);

我甚至使用Ajax刷新项目状态并使用以下内容清除内存中的所有提示，以便Ajax中的新提示变为活动状态：

// prior to ajax update
Tips.hideAll(); // prototip function to hide visible tooltips

tips.each(function(t) {
    delete t;
});

delete tips;
tips = [];

// run ajax update

像led_091133000039这样的每个ID都是我希望在悬停时显示工具提示的图像的ID。该HTML是在页面的早期生成的。我有Javascript，可以在HTML的底部创建所有提示。

希望对你有所帮助。

动态工具提示

1 个答案: