数组中的工具提示/悬停文本

Tooltip/hover-text in an array

本文关键字：悬停 文本 工具提示 数组      更新时间：2023-09-26

我试图在列表菜单中显示工具提示或悬停文本，如果用户选择该值，将提供其他文本。有可能吗？由于数据当前存储在硬编码阵列中。

Code:
<select name="Interests" id="Interests">
 <?php $arr = array('', 'cycling', 'badminton', 'jetskiing', 'ice-skating');
 for($i = 0; $i < count($arr); $i++)
 {
    echo "<option value='"{$arr[$i]}'" {$selected}>{$arr[$i]}</option>'n"; 
 }
?>
</select>

因此，如果我选择循环，列表菜单上应该会出现文本。请告知。谢谢

您尝试做的不是用PHP实现的东西，而是用Javascript实现的东西。PHP涉及在server-side上运行的代码，不处理DOM元素或client-side组件，例如您希望加载的悬停文本/工具提示。浏览器在处理完server-side代码后解析Javascript，并在立即加载后处理页面的其他更改。

我建议你考虑学习（或使用，如果熟悉的话）jQuery，因为它会帮助你完成任务。它是一个Javascript库，具有简化的绑定以便于使用。有很棒的文档和许多插件每天都在使用它。

参考：http://jquery.com/

祝你好运！

这里有一个可能的解决方案。它使用jQuery，因为不能使用title-属性，也不能将另一个子元素放入select-容器中，所以它不是有效的HTML。

请参阅演示：

http://jsfiddle.net/DLyMG/

它的工作原理

这样做的诀窍是，绑定悬停的interests.hover。当您在select-框上时会触发第一个函数，当您离开时会触发第二个函数。出于这个原因，我添加了一个timeout：当用户选择某个东西时，他会移出元素（因为列表比元素本身长）。因此，当他选择某个东西时，他也会触发mouseout事件，因此我们有timeout。

第二件事是绑定onchange-事件，如下所述。当用户选择一个值时，工具提示的内容会发生更改，您可以根据需要添加任何文本或HTML。

Javascript

<script>
$(document).ready(function () {
    var interests       = $('#Interests');
    var tooltip         = $('#tooltip');
    var tooltipInfo     = $('#tooltip_info');
    interests.hover(
        function() {
            tooltip.fadeIn(200);
        },
        function() {
            setTimeout ( function () {
                tooltip.fadeOut(200); tooltipInfo.html();
            }, 1000);
        }
    );
    interests.bind('change', function() {
        tooltipInfo.html('user has changed the value');
    });
});
</script>

CSS

<style>
aside.tooltip {
    display:        none;
    position:       absolute;
    top:            20px;
    left:           300px;
}
</style>

HTML

<select id="Interests">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>
<aside id="tooltip" class="tooltip">
    Hey, I'm a Tooltip.
    <span id="tooltip_info"></span>
</aside>
笔记

这当然需要进一步改进。这只是一个如何实现的例子。您需要在文档中包含jQuery库，例如：

<script src="src/js/com.jquery/1.7/jquery-1.7.min.js"></script>

您想在选择框中的值更改时显示内容吗？使用jQuery change（）http://jsfiddle.net/PxGEc/1/

相关文章：