1

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?

Meow
  • 18,371
  • 52
  • 136
  • 180

2 Answers2

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

writeToBhuwan
  • 3,233
  • 11
  • 39
  • 67
  • Thanks for the insight. There are few issue though, I cannot modify frameborder as it breaks editor UI and also the contents area is reserved as edit area i.e. not allowed to put anyting including divs.. – Meow Apr 15 '13 at 20:48
  • you can simply use $("#contentIframe").contents().find("body").attr('title','Hello world'); – writeToBhuwan Apr 16 '13 at 04:45
  • No need to increase the frame border.. I just wanted to tell you that your code is also working but that is being applied to iframe, not to the contents of iFrame.. – writeToBhuwan Apr 16 '13 at 04:46
0

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.

a female faust
  • 79
  • 7