使用 iFrame 获取 CSS 工具提示以在 Chrome 中工作答案

【问题标题】：Getting CSS Tooltips with iFrames to work in Chrome使用 iFrame 获取 CSS 工具提示以在 Chrome 中工作
【发布时间】：2011-11-17 10:51:18
【问题描述】：

我一直在尝试让 iFrames 跨浏览器工作的 CSS 工具提示，但 Chrome 存在问题。

这是我整理的测试页面：http://paulleduc.com/test.html

如您所见，它在 FF 和 IE 中按预期工作，每次都会在单词的右侧弹出工具提示。然而，在 Chrome 中，工具提示大部分时间都会在屏幕左侧弹出，并且只有当您将鼠标悬停在“从左到右”的字词上时才会在正确的位置弹出。

如果有任何想法可以在 Chrome 中运行，我们将不胜感激，

谢谢！

【问题讨论】：

标签： html css google-chrome iframe tooltip

【解决方案1】：

我不知道您具体使用的工具提示版本。但是，我用这个

http://www.dynamicdrive.com/dynamicindex5/popinfo.htm

我对它在 chrome 或 FF 上工作没有任何问题，它在我测试过的所有浏览器上都工作过，它还附带了非常好的说明。

我不确定是否应该这样，但是当我将鼠标悬停在您的链接上时，它只会打开一个小方块，我可以看到谷歌主页。

但说真的，我在 DHTML 工具提示上方发布的那个在跨浏览器上运行得非常好，如果你决定使用它，请告诉我它是如何工作的。

【讨论】：

嘿，不幸的是，出于我的目的，我需要代码非常少，不使用框架，因为工具提示基本上将通过我托管的 javascript 插入到任何网页中。
您在其中看到的带有 google 主页的方块是我在工具提示中使用的测试 iframe。查看源码发现tooltip代码非常简单。

【解决方案2】：

请确保您使用的是最新版本的 Chrome。我正在使用 Chrome 17.0.942.0 (Official Build 110446) dev-m 并且无法重现该问题 - 工具提示会立即弹出到链接的右侧。但是，由于“由于 X-Frame-Options 禁止显示而拒绝显示文档”，它们的内容为空。错误（我认为这无关。）

【讨论】：