如何在鼠标悬停iframe时显示工具提示 [英] How to display tooltip when mouse hover iframe
问题描述
我正在使用Telerik Radeditor，它是一个富文本区域，编辑内容是iframe，如下所示：
I'm using Telerik Radeditor which is rich text area and the editor content is an iframe, something like below:
<iframe frameborder="0"
src="javascript:'<html></html>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;"
title="hello world"
id="contentIframe"></iframe>
我的目标是显示hello world当用户鼠标悬停在iframe区域时的工具提示。
My goal is to display the "hello world" tooltip when a user mouse hover the iframe area.
正如你所看到的，我把title属性但它没有出现。
As you can see I put "title" attribute but it is not showing up.
为了模仿工具提示行为，我尝试放置 overlay div 和 title 哪个有效但由于重叠div ，我失去了鼠标控制权。
To mimic the tooltip behavior I tried placing overlay div and title which worked but then I lost mouse control because of the overlay div.
我也拼命尝试将标题放在iframe体内，但后来我必须点击iframe才能实现，这不是解决方案。
I also desperately tried putting title in the iframe body but then I had to click inside of iframe to make it happen which is not the solution.
var iframe_html = $(wrapper).find("iframe").contents().find("html");
$(iframe_html).prop("title", "hello my tooltip 1");
var iframe = $(wrapper).find('iframe');
$(iframe).prop("title", "hello my tooltip 2");
var iframebody = $(iframe).contents().find('body');
$(iframebody).prop("title", "hello my tooltip 3");
我正在使用 jQuery UI 1.8.16 这不具备Tooltip功能，因此不能作为选项..
I'm using jQuery UI 1.8.16 which does not come with Tooltip capability thus that cannot be an option..
有谁可以帮我解释如何显示工具提示？
Could anyone help me figure how to show the tooltip?
推荐答案
您可以为iframe分配标题，但是您无法在iframe中看到它。将frameborder更改为2并移动您的光标到它..你去..标题显示...
You are able to assign a title to the iframe but you wont be able to see it in the iframe.. Change the frameborder to "2" and move your cursor to it.. there you go..Title appears...
要在iframe上查看标题，您必须设置iframe内容的标题，而不是iframe本身。 。
To see the title on iframe you must set the title of iframe content and not the iframe itself..
就像我在下面做的那样..
just like i've done below..
<iframe frameborder="0"
src="javascript:'<div id=\'hey\' title=\'Hello World\'>Helllo World</div>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;"
title="hello world"
id="contentIframe">
</iframe>
或者..
使用jQuery
Alternatively.. using jQuery
$(document).ready(function () {
$("#contentIframe").contents().find("body").attr('title','Hello World');
});
这篇关于如何在鼠标悬停iframe时显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
