Javascript 在鼠标上方显示带有文本和图形的弹出窗口

我希望有一个弹出窗口，这样当用户将鼠标悬停在图像上时，它会在图像右侧显示该弹出窗口。该窗口将包含文本和图形。当鼠标离开图像时，窗口应立即关闭。我尝试了internet上的各种脚本，但它们将文本显示为同一页面的innerhtml。所以这打破了我原来的页面。有没有办法在翻滚图像时弹出一个包含文本和图形的框，然后在关闭图像时将其移除？

查看jQuery qtip--

演示：

---

编辑：示例代码（直接来自QTip的演示站点）。这将产生在上看到的效果

//仅在加载文档时创建工具提示
$（文档）.ready（函数（）
{
//将所有链接元素与content div中的href属性匹配
$（'#内容a[href]'）.qtip(
{
content:'工具提示的一些基本内容'//给它一些内容，在本例中是一个简单的字符串
});
});

如果您只需要捕获mouseover和mouseleave事件，如果目标浏览器允许，您可能只需要尝试在image或div上使用CSS和：hover选择器。

我不想安装任何东西。仅仅使用一个脚本就可以实现这一点吗？qtip只是一个脚本，类似于jquery只是一个脚本。如果你不使用像这样的插件，那么是的，这是可能的，但它不会那么漂亮。我会写一个小的，一秒钟。事实上，我记得更痛苦。你必须得到图像的偏移量，应用一堆css，全部删除，等等。老实说，这些插件要容易得多。你能给我看一个如何实现这一点的示例脚本吗。我是jquery新手，上面网站上的脚本对我来说似乎很混乱。

<script type="text/javascript" src="your/path/to/qtip.js"></script>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('#content a[href]').qtip(
   {
      content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
   });
});
</script>