sosyal medya kullanmaktansa, buraya girip iki soru görüp zihnimi çalıştırmayı tercih ederim. markdown editör mobil için hiç uyumlu değil. genişliği sabitlenmeli. hatta genişlik normal kullanımda da sabitlenmeli. ayrıca editör birşeyleri silerken kararsız davranıyor, özellikle mobilde. bunun dışında mobilde textarea:focus durumdayken metin için scrollbar çıkmıyor. bu da tek seferde yazdın yazdın, hata yaparsan başa sona veya herhangi bir yere dönemezsin demek.

SELECT * FROM 
questions_all as qa
INNER JOIN questions_option as qo
ON (qa.quesID =  qo.quesID)

burada zaten iki tabloyu id değerleri ile birleştiriyorsun, daha sonrasında where de bu iki kolonu birbirine eşitlemen gerekmez. ayrıca foreach'ın içerisinde değil öncesinde sql kullanman lazım, çıktıyı zaten dizi olarak verecek sana. Ayrıca tek bir sorgulama yapmışsın. PDO'nun kullanımına buradan bakabilirsin; http://www.erbilen.net/pdo-kullanimi/

doğru kullanım

$list2 = $_db->query(
    "SELECT * FROM questions_all AS qa INNER JOIN questions_option AS qo ON (qa.quesID =  qo.quesID)",
    PDO::FETCH_ASSOC);
print_r($list2)

edit: sql kodunu veritabanında çalıştır dönen değerleri gör ve ona göre where belirle, eğer belirlemek istiyorsan. son olarak * ile sorgu yapma. sadece ihtiyacın olan kolonları seç. kod yazmayı öğrendikten sonra, daha kalitelisini yazmaya kendini zorla.

kolonu varchar olarak belirttiysen ve uzunluk değerini belirttiysen, ne kadar uzunluk olursa olsun, belirttiğin değerin uzunluğu kadarını alır gerisini keser. bir kontrol et yapını. birde tavsiye olarak, bu şekilde veritabanını yavaşlatırsın, sorgu sürelerin uzar. ayrıca güvenli bir kullanım değil, urlden parametre bildirilerek sql için bir enjeksiyon unsuru taşıyor sorguların. bindparam kullan.

hataların üstesinden gelemiyorsan, örnek versekte yine hata alman mümkün. çünkü ne tür bir veritabanı kullanıyorsun, bağlantıyı nasıl sağlıyorsun, tablo yapın nasıl bilmiyoruz. tabloyu oluşturan sql kodları ve excele dönüştürmek için kullandığın php sınıfı eklersen, yardımcı olmak isterim. çalışır hale geleceğinden emin olabilirsin.

@kartal dediğiniz sadece overflow yok iken çözüm, zaten bu normal kullanımı ve içeriğin tamamını okusaydınız denediğimi yazdım.

@tayfunerbilen yanıtınız için teşekkür ederim. normal bir davranış olduğunun tabiki farkındayım. overflow hidden vermeme rağmen, içerisinde absolute ile serbest kalmış ve negatif değerlerle hizalanmış elemanlar çalışıyor; file elemanını absolute değeri verdiğimde. aslında kodlar çok temiz ve anlaşılır idi, ama elementlerin tamamını javascript ile oluşturduğumdan, gerekli alanları kopyalayıp yapıştırınca böyle çirkin bir görünüm oldu. teknik olarak sizi çok net anlıyorum. tooltip için dediğiniz gibi, imleç üzerinde iken değer ataması yapıyor ve değilken değerleri temizliyorum.

    this.returnTree   = function(data){
        let ftp = atob(data[0]);
        let design = data[1];
        let dTriger = [ {event: "click", id: ".FileInfos"}, {event: "mouseenter", id: ".item-hints"} ];
        $('#dizintool').html('');
        $('#dizintool').append(ftp);
        $('.hidefolder ul li ul').hide();
        $('.ExpansionElement').on('click',function(){
            design == 0 ?
                $(this).next('sup').next('.CollapseElement').slideToggle() :
            $(this).next('ul').slideToggle();
            $(this).find('i').toggleClass('fa-folder-open fa-folder');
        });
        $(dTriger[design]['id']).on(dTriger[design]['event'], function(){
            let supDizin = function(value){return value.length > 30 ? '...'+value.substr(value.length-27, 27) : value;}
            let clickE = $(this).attr('data-id') == 1 ? "file" : "span";
            let bilgiler = ['ad', 'atime', 'mtime', 'ctime', 'tip', 'boyut', 'izin', 'dizin'];
            let hanimiselement = design == 0 ? $(this).prev(clickE) : $(this);
            let aciklamalar = [];
            for (let bilgi of bilgiler)
                aciklamalar[bilgi] = hanimiselement.attr('data-'+bilgi);
            let aciklama =  `name: ${aciklamalar["ad"]}<br>
                            dir: ${supDizin(aciklamalar["dizin"])}<br>
                            atime: ${aciklamalar["atime"]}<br>
                            mtime: ${aciklamalar["mtime"]}<br>
                            ctime: ${aciklamalar["ctime"]}<br>
                            filetype: ${aciklamalar["tip"]}<br>
                            filesize: ${aciklamalar["boyut"]}<br>
                            chmod: ${aciklamalar["izin"]}<br>`;
            $(this).find('.FileInfo').html().length == 0 ? 
                $(this).find('.FileInfo').html(aciklama) :
            (design == 0 ?  $(this).find('.FileInfo').html('') :
           $(this).mouseleave(function(){$(this).find('.FileInfo').html('')}));
            design == 0 ? $(this).find('.FileInfo').slideToggle() : false;
        });
    }

bir miktar karmaşık bir kodlama gibi göze çarpabilir ama, 2 kez method yazmaktansa 2 farklı tasarım için az koşulla daha kısa tek bir method yaazmayı daha mantıklı buldum.

son olarak dediğiniz şekilde body de tek bir tooltip bırakıp, bunun üzerinden veri göstermeyi denedim. programlama kısmında hiçbir sorun yok, ama istediğim tasarımı nasıl uygulayacağımı bilemiyorum.

en yalın haliyle sadece tooltip için kullandığım tasarım.

<div style="margin:40%">
    <folder data-position="4"> Klasör
        <div class="file-content">
            merhaba dünya
        </div>
    </folder>
</div>

file, folder {
    position: relative;
}
.file-content, .file-content {
    border-radius: 0% 30% 0% 30%;
    -webkit-box-shadow: 0px 0px 10px 7px rgba(255,0,0,0.66); 
    box-shadow: 0px 0px 10px 7px rgba(255,0,0,0.66);
    color: black;
    text-align:justify;
    background:radial-gradient(circle, rgba(255, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(255, 0, 0, 0.33) 100%);
    width: 300px;
    position: absolute;
    z-index: 5;
    padding: 0px 15px 0px 15px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 3s ease, visibility 3s ease;
    transition: opacity 3s ease, visibility 3s ease;
    pointer-events: none;
    visibility: shidden;
    pointer-events: none;
}
file:hover .file-content, folder:hover .file-content {
    border-radius: 0% 30% 0% 30%;
    -webkit-box-shadow: 0px 0px 10px 7px rgba(255,0,0,0.66); 
    box-shadow: 0px 0px 10px 7px rgba(255,0,0,0.66);
    text-align:justify;
    background:rgb(0 0 0 / 70%);
    width: 300px;
    position: absolute;
    z-index: 5;
    padding: 0px 15px 0px 15px;
    opacity: 1;
    visibility: visible !important;
    -webkit-transition: opacity 3s ease, visibility 3s ease;
    transition: opacity 3s ease, visibility 3s ease;
    pointer-events: none;
    color: red;
    visibility: hidden;
    pointer-events: none;
}
.file-content::before, .file-content::before {
    width: 0;
    bottom: 0;
    right: 0;
    content: "";
    background-color: red;
    height: 1px;
    position: absolute;
}
file:hover .file-content::before, folder:hover .file-content::before {
    width: 280px;
    transition: width 3s;
}
.file-content::after, .file-content::after {
    width: 0px;
    bottom: -56px;
    left: 386px; /*357 uyumsuz nokta*/
    content: "";
    background-color: red;
    height: 1px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
file:hover .file-content::after, folder:hover .file-content::after {
    width: 80px;
    transition: width 0.5s;
}
file[data-position="4"] .file-content, folder[data-position="4"] .file-content {
    bottom: 65px;
    left: -383px;
}

body içinde herhangi bir yere aldığımda, nasıl pozisyon aldıracağımı bilemiyorum. element içindeyken doğrudan ona göre konumlanıyor.

arkadaşın verdiği ilk cevap doğru olmasına rağmen, bende çalışmadı. geçte olsa sebebini anlayabildim. modül olarak çalışmama dahil ediyorum bütün javascript dosyalarını. global ölçekte hiçbir değer görmüyor. bu yüzden window içerisinde sınıf tanımsız dönüyor. windowu kaldırıp sınıfı önceden bildirince sorun ortadan kalktı.

app[data.method](data.parametre);

absolute bulundugu elementi bagimsiz konumlandirir. yonleri piksek olarak belirtmelisin. left:0 gibi veya kapsayici relative yapmalisin.

app ana sınıfım. bu yüzden this ile içerisindeyken diğer methodları çağrabiliyorum. this'e bu kadar takılmana gerek yoktu. çalışmaya dahil edilen farklı sınıflar mevcut. bu yüzden dediğiniz gibi doğrudan erişim yapmam anlamsız. doğrudan erişim yapacak olsam, istek gönderip yanıt beklemem de anlamsız. şuan eval ile kullanıyorum dönen değerleri ama, eval kullanmak hoşuma gitmiyor. https://prnt.sc/0JS6et_QbB5e bahsettiğiniz kullanımın neden çalışmadığını anlamıyorum, bu yüzden çalışan tüm çağırma yöntemlerini window içinde denedim, this'e takılmayınız yani. resimdekinin aynını doğrudan succes de bildirdiğimde zaman ise https://prnt.sc/WLNfKYRe-Q8G