/* Tooltip (RTL, default: top-left of cursor) */
.tf-float {
    position: fixed;
    background: #333;
    color: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    white-space:pre-wrap;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transform: translate3d(0,0,0);
    transition: opacity 120ms;
    font: 15px/1.4 Tanha;
    /* برای سایت‌های فارسی */
    direction: rtl;
    text-align: center;
}

/* حالت نمایش */
.tf-float--visible {
    opacity: 1;
}

/* فلش پیش‌فرض: چون جعبه بالایِ چپِ موس است، فلش باید به سمت پایین باشد و گوشهٔ راستِ جعبه قرار بگیرد */
.tf-float::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    /* جهت پیش‌فرض: پایین (به سمت موس) */
    border-bottom-color: #333;
    bottom: -12px;
    right: 10px; /* RTL: فلش سمت راست باکس */
}

/* وقتی از چپ جا کم بیاد و به راست موس سوئیچ کنیم */
.tf-float--flipX::after {
    right: auto;
    left: 10px; /* فلش به گوشهٔ چپ باکس منتقل شود */
}

/* وقتی از بالا جا کم بیاد و به زیر موس سوئیچ کنیم: فلش باید به بالا اشاره کند و بالای باکس بیاید */
.tf-float--flipY::after {
    border-bottom-color: transparent;
    border-top-color: #333;
    top: -12px;
    bottom: auto;
}

/* ترکیبی هم درست کار می‌کند (نیازی به کلاس اضافه نیست) */