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

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

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涉及在

服务器端

上运行的代码，不处理DOM元素或

客户端

组件，例如您希望加载的悬停文本/工具提示。Javascript在

服务器端

代码被压缩后由浏览器解析，并在立即加载后处理对页面的其他更改

我建议您研究学习（或使用，如果熟悉的话）

jQuery

，因为它将帮助您完成任务。它是一个Javascript库，具有简化的绑定以便于使用。有很多文档和插件每天都在使用它

参考：

---

祝你好运

您试图做的不是用PHP实现的东西，而是Javascript。PHP涉及在

服务器端

上运行的代码，不处理DOM元素或

客户端

组件，例如您希望加载的悬停文本/工具提示。Javascript在

服务器端

代码被压缩后由浏览器解析，并在立即加载后处理对页面的其他更改

我建议您研究学习（或使用，如果熟悉的话）

jQuery

，因为它将帮助您完成任务。它是一个Javascript库，具有简化的绑定以便于使用。有很多文档和插件每天都在使用它

参考：

---

祝你好运

这里有一个可能的解决方案。它使用jQuery，因为您不能使用

title

-属性，也不能将另一个子元素放入

select

-容器中，所以它不是有效的HTML

请参见演示：

工作原理 其中的诀窍是绑定hover

兴趣。hover

。第一个功能在您通过

选择

-框时触发，第二个功能在您离开时触发。出于这个原因，我添加了一个

timeout

：当用户选择某个内容时，他会移出元素（因为列表比元素本身长）。因此，当他选择某个东西时，他也会触发

mouseout

事件，因此我们有

timeout

第二件事是绑定

onchange

-事件，如下所示。当用户选择一个值时，工具提示的内容将更改，您可以根据需要添加任何文本或HTML

Javascript

$（文档）.ready（函数（）{
var利息=$（“#利息”）；
变量工具提示=$（“#工具提示”）；
var tooltipInfo=$（“#tooltip_info”）；
利益悬停(
函数（）{
工具提示：fadeIn（200）；
},
函数（）{
setTimeout（函数（）{
fadeOut（200）；tooltipInfo.html（）；
}, 1000);
}
);
利益绑定（'change'，function（））{
html（'用户已更改了值'）；
});
});

CSS

工具提示{
显示：无；
位置：绝对位置；
顶部：20px；
左：300px；
}

HTML

值1
价值2
价值3
嘿，我是一个工具提示。

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

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

---

这里有一个可能的解决方案。它使用jQuery，因为您不能使用

title

-属性，也不能将另一个子元素放入

select

-容器中，所以它不是有效的HTML

请参见演示：

工作原理 其中的诀窍是绑定hover

兴趣。hover

。第一个功能在您通过

选择

-框时触发，第二个功能在您离开时触发。出于这个原因，我添加了一个

timeout

：当用户选择某个内容时，他会移出元素（因为列表比元素本身长）。因此，当他选择某个东西时，他也会触发

mouseout

事件，因此我们有

timeout

第二件事是绑定

onchange

-事件，如下所示。当用户选择一个值时，工具提示的内容将更改，您可以根据需要添加任何文本或HTML

Javascript

$（文档）.ready（函数（）{
var利息=$（“#利息”）；
变量工具提示=$（“#工具提示”）；
var tooltipInfo=$（“#tooltip_info”）；
利益悬停(
函数（）{
工具提示：fadeIn（200）；
},
函数（）{
setTimeout（函数（）{
fadeOut（200）；tooltipInfo.html（）；
}, 1000);
}
);
利益绑定（'change'，function（））{
html（'用户已更改了值'）；
});
});

CSS

工具提示{
显示：无；
位置：绝对位置；
顶部：20px；
左：300px；
}

HTML

值1
价值2
价值3
嘿，我是一个工具提示。

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

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

---

是否希望在选择框中的值更改时显示内容？使用jQuery change（）

您想让内容显示在选择框中的值更改上吗？使用jQuery change（）

没有可用的php吗（或者有没有办法确定列表的大小-

<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>

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