شكرا أخي سليمان
أكتفي بهذه النتيجة وسأقوم برفع الملفات اللازمة للحصول على هذه النتيجة ويمكن التعديل عليها أخي لمزيد من التطوير
نقوم أولا بوضع هذ الكود في أول قالب sections_list
CSS نسخ الكود
<style>
/* === TOOLTIP CONTENEUR === */
.subject-tooltip-box {
position: absolute;
width: 450px;
height: 350px;
border: 4px solid #218c74 ;
background: #ffffff;
padding: 5px;
border-radius: 6px;
box-shadow: 0 6px 15px rgba(0,0,0,0.35);
z-index: 9999;
display: none;
overflow: hidden;
}
/* === CONTENU TOOLTIP === */
.subject-tooltip-box .tooltip-content {
width: 100%;
height: 100%;
overflow: hidden; /* IMPORTANT */
}
/* === WRAPPER IFRAME === */
.subject-iframe-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
}
/* === IFRAME POWERBB === */
.subject-iframe {
position: absolute;
top: -300%; /* 🔥 AJUSTE CETTE VALEUR */
left: 0;
width: 100%;
height: 1500px; /* hauteur suffisante pour inclure le sujet */
border: 0;
display: block;
}
/* === SI TU UTILISE subject_content.php (DD DIRECT) ===
.subject-tooltip-box dd.tbar_writer_info {
width: 100%;
height: 100%;
margin: 0;
padding: 12px;
box-sizing: border-box;
overflow-y: auto;
}*/
</style>
نقوم برفع الملفات المرفقة إلى جذر المنتدى
في قالب sections_list نبحث عن الكود التالي
Html نسخ الكود
<a href="index.php?page=topic&amp;show=1&amp;id={$forum['last_subjectid']}" title="{$forum['last_subject_title']}">{$forum['last_subject']}</a>
ونستبدله بالكود التالي
Html نسخ الكود
<a href="index.php?page=topic&amp;show=1&amp;id={$forum['last_subjectid']}"
class="subject-tooltip"
data-subjectid="{$forum['last_subjectid']}">
{$forum['last_subject']}
</a>
نضيف كود جافا سكريبت التالي في آخر القالب
Java نسخ الكود
<script>
document.addEventListener('DOMContentLoaded', function () {
// Créer un élément tooltip global
let tooltip = document.createElement('div');
tooltip.className = 'subject-tooltip-box';
let content = document.createElement('div');
content.className = 'tooltip-content';
tooltip.appendChild(content);
document.body.appendChild(tooltip);
// Parcourir tous les liens de sujet
document.querySelectorAll('.subject-tooltip').forEach(link => {
let loaded = false; // pour éviter plusieurs requêtes
let tooltipHtml = '';
// Survol du lien
link.addEventListener('mouseenter', function (e) {
if (loaded) {
tooltip.style.display = 'block';
content.innerHTML = tooltipHtml;
return;
}
let subjectId = this.getAttribute('data-subjectid');
fetch('subject_tooltip.php?subjectid=' + subjectId)
.then(response => response.text())
.then(html => {
tooltipHtml = html;
content.innerHTML = html;
tooltip.style.display = 'block';
loaded = true;
});
});
// Suivre la souris
link.addEventListener('mousemove', function (e) {
tooltip.style.top = (e.pageY + 15) + 'px';
tooltip.style.left = (e.pageX + 15) + 'px';
});
// Sortie de survol
link.addEventListener('mouseleave', function () {
tooltip.style.display = 'none';
});
});
});
</script>
نعاين النتيجة بعد ذلك
بالتوفيق للجميع