我使用Telerik的Radeditor这是富文本区域和编辑内容的iframe,类似下面:
<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区域。
正如你可以看到我把"title" attribute
,但它没有显示出来。
为了模拟工具提示的行为我试图将overlay div
和title
,其工作,但后来我失去了,因为鼠标控制overlay div
。
我也拼命地试图把标题中的iframe机构,但后来我不得不iframe中点击做到这一点是不是解决办法。
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
不附带工具提示功能因而不能是一种选择..
谁能帮助我如何显示工具提示?
你能标题分配到的iframe,但你不会看到它在iframe ..更改FRAMEBORDER为“2”,你的光标移动到它..有你go..Title出现...
要查看的iframe标题必须设置的IFRAME内容的标题,而不是在iframe本身..
就像我已经做了如下..
<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 ..
$(document).ready(function () {
$("#contentIframe").contents().find("body").attr('title','Hello World');
});
这是供你参考小提琴..
我只是在W3学校添加一个iframe到div 提示教程(TryIt编辑在这里 ),它完美地工作。 出乎我的意料。
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #994444;
color: #ffffff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Proof of Concept</h2>
<p>This, cobbled from the W3 schools tutorial on CSS tooltips. I added an Iframe inside the div; one may still interact therewith, yet enjoy full tooltipitude.</p>
<p> So, move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Hello World</span>
<iframe height="600px" src="https://imgur.com/a/71J1gQZ" width="600px" ></iframe>
</div>
</body>
</html>
看到它住在这里:
https://faustsstudy.blogspot.com/p/blog-page_14.html
但它需要对数据URI支持。