数组中的工具提示/悬停文本 [英] Tooltip/hover-text in an array

问题描述

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

I'm trying to display a tooltip or hover-text in a list-menu whereby if the user select that value, there will be additional text provided. Is it possible ? As the data is currently stored in a hard-coded array.

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>

所以如果我选择骑车，列表菜单上应该有文本。好心提醒。谢谢！

So if I select the cycling, there should be text appearing on the list-menu. Kindly advise. Thanks!

推荐答案

这里是一个可能的解决方案。它使用jQuery，因为你不能使用 title -attribute，并且不能将另一个子元素放入 select -Container，它将无效的HTML。

Here is a possible solution. It uses jQuery, since you can't use the title-attribute and you can't put another child element into the select-Container, it wouldn't be valid HTML.

http://jsfiddle.net/DLyMG/

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

The trick with this is, to bind the hover interests.hover. The first function is triggered when you're over the select-box, the second is triggered when you leave. I added a timeout for this reason: When the user selects something, he moves out of the element (because the list is longer than the element itself). So, when he selects something, he would also trigger the mouseout event, therefore we have the timeout.

第二件事是绑定 onchange -event，这在下面完成。当用户选择一个值时，工具提示的内容将被更改，您可以随意添加任何文字或HTML。

The second thing is to bind the onchange-event, which is done below. When the user selects a value, the content of the tooltip is changed and you can add any text or HTML as you like.

<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

CSS

<style>

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

</style>

HTML

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库，例如：

Note

This needs of course some further improvements. Just an example of how this is possible. And you need to include the jQuery-library in your document, like:

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

这篇关于数组中的工具提示/悬停文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！