动态工具提示


Dynamic Tool Tips

有人能给我指正确的方向吗。我一直在搜索,但找不到如何在动态生成的数据中添加工具提示。例如,我正在生成一个显示电影标题的mysql结果列表,并希望有一个工具提示,当鼠标悬停在上面时,可以提供导演、演员等额外信息。每次都会生成电影标题的随机列表。

我知道如何将工具提示添加到静态数据中,但如何快速添加工具提示?

任何指向正确方向的指针或铲球都将不胜感激。

我在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是在页面的早期生成的。我有一个在HTML底部创建所有提示的Javascript。

希望对你有所帮助。