Destroying Iframe Content in a Tooltip When Hidden
Environment
Product | Progress® Kendo UI® Tooltip |
Version | 2025.1.227 |
Description
I noticed that when a tooltip iframe is hidden, it still actually exists in the HTML code. The URL I open with the tooltip is active, and I would like to stop the activity of this page when the tooltip hides. Therefore, I need the iframe to be destroyed or its content to be removed when the tooltip is hidden. How can I achieve this?
This knowledge base article also answers the following questions:
- How do I stop an iframe from loading content when the tooltip is hidden?
- How can I remove the iframe content of a tooltip upon hiding?
Solution
To remove or destroy the iframe content of a Tooltip when it is hidden, handle the hide
event of the Tooltip and modify the src
attribute of the iframe to an empty string. Additionally, during the show
event, you can set the src
attribute of the iframe to the desired URL.
Below is an example demonstrating how to implement this behavior:
<span id="target" title="Tooltip content"> Some content </span>
<script>
$(document).ready(function () {
$("#target").kendoTooltip({
iframe: true,
content: {
url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html",
},
hide: function(e){
$('.k-content-frame').attr('src', '')
},
show: function(){
$('.k-content-frame').attr('src', 'https://www.google.com/maps/embed')
},
width: 220,
height: 280,
requestStart: function (e) {
e.options.url = "https://www.google.com/maps/embed";
},
});
});
</script>
In this solution, the hide
event handler sets the src
attribute of the iframe (selected by the .k-content-frame
class) to an empty string, effectively removing its content. The show
event handler resets the src
attribute to the desired content URL each time the tooltip is shown.