جافاسكريبت - كيف يمكنني تعديل موقع أداة التلميح (Tooltip) الخاصة بـ Bootstrap لعنصر معين؟

لدي هذه الأزرار/الروابط هنا وتلميح أداة مصنوع بواسطة Bootstrap:

<a id="btn1" class="mybutton" data-container="body" data-toggle="tooltip" data-placement="right" title="my tooltip">
    Hover Me To Display Tooltip
</a>

<a id="btn2" class="mybutton" data-container="body" data-toggle="tooltip" data-placement="right" title="my tooltip">
    Hover Me To Display Tooltip
</a>

واجمعه مع كود jQuery الذي هو هذا:

$(document).ready(function(){
    $(".mybutton").tooltip();
});

سيعمل بشكل مثالي، حيث يعرض تلميح الأداة على الجانب الأيمن.

لكن كيف يمكنني تغيير موضع التلميح الخاص بالزر button1 فقط باستخدام CSS، بحيث أتمكن من تحريكه أكثر إلى اليمين؟ دون تحريك التلميح الخاص بالزر button2؟

الإجابة رقم 1

طبق السمة البيانات data-placement="right" على العنصر الذي تريد تغيير موضع التلميح فيه؛

يمكنك أيضًا تعيين top وleft وright وbottom وauto.

إذا كنت تريد معرفة المزيد عن التلميحات. تحقق من إعدادات تلميحات Bootstrap

الإجابة رقم 2

بالنسبة لـ Bootstrap4، نظرًا لأنه يستخدم "transform: translate3d" لتحديد موضع التلميح، يجب استخدام left و top في CSS لضبط موضع التلميح. على سبيل المثال، لتحريك التلميح لأسفل بمقدار 10 بكسل ولليمين بمقدار 10 بكسل:

.tooltip-class {
    left: 10px;
    top: 10px;
}