How to display tooltip when mouse hover 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>

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?

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/16020727/how-to-display-tooltip-when-mouse-hover-iframe

标签

javascript