How to display tooltip when mouse hover iframe

2019-08-10 13:58发布

站内问答 / JavaScript
581 2 4

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>

My goal is to display the "hello world" tooltip when a user mouse hover the iframe area.

As you can see I put "title" attribute but it is not showing up.

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.

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");

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?

2条回答
冷血范
2楼-- · 2019-08-10 14:56

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

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>

Alternatively.. using jQuery

$(document).ready(function () {    
    $("#contentIframe").contents().find("body").attr('title','Hello World');    
});

This is a fiddle for your reference..

查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-08-10 14:56

I just added an iframe to the div in the w3 schools tooltip tutorial (TryIt editor here) and it worked perfectly. To my surprise.

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

See it live here :

https://faustsstudy.blogspot.com/p/blog-page_14.html

but it requires support for data URIs.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)