动态工具提示

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

希望这对你有帮助。