鼠标悬停在框架上时如何显示工具提示

How to display tooltip when mouse hover iframe

本文关键字：显示 工具提示 何显示 悬停 框架 鼠标      更新时间：2023-09-26

我使用的是Telerik raddeditor，这是一个富文本区域，编辑器内容是一个iframe，如下所示:

 <iframe frameborder="0" 
    src="javascript:'<html></html>';" 
    style="width: 100%; height: 100%; margin: 0px; padding: 0px;" 
    title="hello world" 
    id="contentIframe"></iframe>

我的目标是当用户鼠标悬停在iframe区域时显示"hello world"工具提示。

你可以看到我输入了"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"，并将光标移动到它上面。标题出现了

要在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 schools工具提示教程(TryIt编辑器在这里)中添加了一个iframe到div，它工作得很好。

<!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

相关文章：