diff --git a/Products/zms/plugins/www/bootstrap/plugin/bootstrap.plugin.zmi.js b/Products/zms/plugins/www/bootstrap/plugin/bootstrap.plugin.zmi.js
index 6b7a7d49a..9974e09ce 100644
--- a/Products/zms/plugins/www/bootstrap/plugin/bootstrap.plugin.zmi.js
+++ b/Products/zms/plugins/www/bootstrap/plugin/bootstrap.plugin.zmi.js
@@ -1322,9 +1322,9 @@ ZMIObjectTree.prototype.addPages = function(nodes) {
 		};
 		if (node.is_page_element) {
 			if (node.meta_id == 'ZMSGraphic' && node.index_html) {
-				html += `<span class="preview_on_hover preview_image preview_ready" style="--preview_url:url(${node.index_html});cursor:help" title="${getZMILangStr('TAB_PREVIEW')}">${icon}</span> `;
+				html += `<div class="preview_on_hover preview_image preview_ready" style="--preview_url:url(${node.index_html});cursor:help" title="${getZMILangStr('TAB_PREVIEW')}">${icon}</div> `;
 			} else {
-				html += `<span class="preview_on_hover preview_text" style="cursor:help" data-preview_text="Loading ..." onmouseover="$ZMI.objectTree.preview_load(this)" title="${getZMILangStr('TAB_PREVIEW')}">${icon}</span> `;
+				html += `<div class="preview_on_hover preview_html" style="cursor:help" data-preview_text="Loading ..." onmouseover="$ZMI.objectTree.preview_load(this)" title="${getZMILangStr('TAB_PREVIEW')}"><div class="preview_preview">Loading ...</div>${icon}</div> `;
 			}
 		}
 		html += `<a href="${node.getPath}"
@@ -1399,9 +1399,7 @@ ZMIObjectTree.prototype.preview_load = function(sender) {
 	if(!$(sender).hasClass('preview_loaded')) {
 		var abs_url = $(sender).parent('li').children('a[href]').attr('href');
 		$.get($ZMI.get_rest_api_url(abs_url)+'/get_body_content',{lang:getZMILang(),preview:'preview'},function(data){
-			// Clean data as plain text
-			data = $(JSON.parse(data)).text().replaceAll('\n','');
-			$(sender).attr('data-preview_text',data);
+			$(".preview_preview",sender).html(data);
 			$(sender).addClass('preview_loaded');
 		});
 	};
diff --git a/Products/zms/plugins/www/zmi.core.css b/Products/zms/plugins/www/zmi.core.css
index 965636929..59b524daf 100644
--- a/Products/zms/plugins/www/zmi.core.css
+++ b/Products/zms/plugins/www/zmi.core.css
@@ -687,7 +687,19 @@ body.zmi ul.zmi-container > .zmi-item > .right {
 	}
 }
 
-.preview_on_hover::after {
+
+/* -------------------------------------------------- */
+/* ZMI-SITEMAP Preview Popup                          */
+/* -------------------------------------------------- */
+
+.preview_on_hover,
+.preview_on_hover.preview_html {
+	display: inline-block;
+}
+/* [A] PLAIN Preview for Navtree: Image or Plain Text */
+/* based on CSS-Pseudo-Elements (preview_image/text)  */
+.preview_on_hover.preview_image::after,
+.preview_on_hover.preview_text::after {
 	content:"";
 	height:0;
 	opacity:0;
@@ -697,7 +709,8 @@ body.zmi ul.zmi-container > .zmi-item > .right {
 	margin-top:1.5rem;
 }
 
-.preview_on_hover:hover::after,
+.preview_on_hover.preview_image:hover::after,
+.preview_on_hover.preview_text:hover::after,
 body.zmi ul.zmi-container > .zmi-item .right video {
 	content:"";
 	width:20vw;
@@ -718,6 +731,7 @@ body.zmi ul.zmi-container > .zmi-item .right video {
 	box-shadow: 5px 5px 20px #c0c0c094;
 	transition: opacity .75s, height .5s, box-shadow 1s, background-color 1s  ease; 
 }
+
 .preview_on_hover.preview_text:hover::after {
 	content:attr(data-preview_text);
 	background-image:none;
@@ -739,6 +753,34 @@ body.zmi .zmi-sitemap span.preview_on_hover:hover::after {
 	margin: 1rem 0 0 -.5rem;
 }
 
+/* [B] RENDERED HTML Preview based on renderShort()   */
+/* based on DOM-Elements (preview_html)               */
+.preview_on_hover.preview_html .preview_preview {
+	zoom: 70%;
+	width: 0;
+	height: 0;
+	padding: .5rem;
+	margin: 1rem 0 0 -.5rem;
+	overflow: hidden;
+	opacity:0;
+	visibility:hidden;
+	position:absolute;
+	background-color:white;
+	border:1px solid #c0c0c0;
+	border-radius:4px;
+	z-index:1000;
+	box-shadow: 5px 5px 20px #c0c0c0;
+	transition: opacity .75s, height .5s, box-shadow 1s, background-color 1s  ease;
+	cursor:default;
+}
+.preview_on_hover.preview_html:hover .preview_preview {
+	visibility:visible;
+	opacity:1;
+	width: 35vw;
+	height: 35vh;
+}
+
+
 @media (max-width: 767px) {
 	body.zmi header.navbar {
 		max-width: 100%;