将鼠标悬停在图像ASP.NET上时显示盘子的详细信息

我的页面上有很多图片，我想在旁边出现一些注释/评论/详细信息，解释当它们悬停在任何特定图片上时，图片的用途

这是一个餐厅项目。当有人将鼠标悬停在图像上时，它会显示碟形文字描述

我将如何实现这一目标

（我想要的是类似于将鼠标悬停在stackoverflow页面下面的标签上时的内容…）

正文
{
}
/*图像框样式*/
#主包装盒{
边框：5px实心#fff；
光标：指针；
高度：100px；
浮动：左；
保证金：5px；
位置：相对位置；
溢出：隐藏；
宽度：100px；
-网络工具包盒阴影：1px 1px 1px#ccc；
-莫兹盒阴影：1px 1px 1px#ccc；
盒影：1px 1px 1px#ccc；
}
#主包装盒{
位置：绝对位置；
左：0；
-webkit过渡：所有300毫秒的速度都很慢；
-moz转换：所有300毫秒的时间都会变慢；
-o型过渡：所有300毫秒都放松；
-ms转换：所有300毫秒都放松；
过渡：所有300毫秒都放松；
}
/*标题常用样式*/
#mainwrapper.box.caption{
背景色：rgba（0,0,0,0.8）；
位置：绝对位置；
颜色：#fff；
z指数：100；
-webkit过渡：所有300毫秒的速度都很慢；
-moz转换：所有300毫秒的时间都会变慢；
-o型过渡：所有300毫秒都放松；
-ms转换：所有300毫秒都放松；
过渡：所有300毫秒都放松；
左：0；
}
/**描述3：褪色**/
#mainwrapper.box.fade标题
{
不透明度：0；
宽度：100px；
高度：100px；
文本对齐：左对齐；
填充：0px；
}
/**淡入淡出字幕：悬停行为**/
#mainwrapper.box:悬停。淡入淡出标题
{
不透明度：1；
}

---

您可以在图像标记中使用title属性。鼠标悬停时，将显示标题。例如：

<img src="smiley.gif" alt="Smiley face" width="42" height="42" title ='test'>

您是否尝试过任何方法，或者您是否希望堆栈溢出为您完成这项工作？我尝试了一些方法，但当数据变得更多时，文本会溢出。以前我试过图像。但这对我不起作用。展示你在你的问题上的尝试，并告诉我们预期的输出是什么，让我们看看哪里出了问题。代码为@Jclya的更新问题也尝试了这一点，但我的图像大小很小，高100:px宽：100px，但我想要更多的文本。正如我们可以说的那样，dish@qamaru的小描述是否尝试在标题中使用更多文本？这看起来怎么样？

我试过用很长的标题，当鼠标移到图片上时，它就会显示出来。请看这里：