@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

bu yöntemi denemiştim ancak, methodu okumuyordu. daha anlaşılır olması için yalın şekilde aşağıya kod ekliyorum.

                    $.ajax({
                        url: 'Control',
                        type: 'POST',
                        data: form,
                        dataType: "json",
                        success: function(data){
                            console.log(data); //çalışıyor
                        }
                    });

buraya kadar sorun yok,

app.returnTree(data.parametre[0], data.parametre[1]);
...
this.returnTree(data.parametre[0], data.parametre[1]);
...
app.returnTree(false, 1);

yukarıdaki kullanımlarda sorun yok hepsinde yanıt alabiliyorum.

window[data.sinif][data.method](data.parametre);
...
window[data.sinif][data.method](data.parametre[0], data.parametre[1]);
...
window["app"]["returnTree"]("false", 1);
...
window["this"]["returnTree"]("false", 1);
//app:91 Uncaught TypeError: Cannot read properties of undefined (reading 'returnTree')

bu şekilde kullandığımda ise methodu okuyamadığına dair bir hata alıyorum.

div blur efekti alirsa icerigi de bulanik olur. before veya after kullan olculeri ve pozisyonu ayni kalsin ana div transparan iken before blurlu olsun.

veri = () => {
    return $(this).attr(data-id);
}

onclick olarak kullan. mobilden yazdim aslinda;

clas.onclk.imli olur mobilim yazmaya yazmaya yazmaya yazmaya usendimim.

agzimi bozucam markdown editorde ssildikce 2 kere ekliyor