ديفكوم- التلميبحات Bootstrap 5 Tooltip التفاصيل

المقالات

التلميبحات Bootstrap 5 Tooltip

-

بنحكي في هذا الدرس عن Tooltip، وهو عبارة عن مربع منبثق صغير يظهر عندما يحرك المستخدم مؤشر الماوس فوق elements، بغرض اعطاء تلميح او توضيح معين.

لاضافة Tooltip بنستخدم الكود مع element:

data-bs-toggle="tooltip"

وبنستخدم title attribute لتحديد النص المطلوب عرضه ك Tooltip

Tooltip بشتغل مع JavaScript يعني اجباري نضيف بعض الكود الخاص ب JavaScript.

كود JavaScript هو :

 <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll(@@#[data-bs-toggle="tooltip"]@@#))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>

نطبق مثال حتى نفهم الموضوع.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
    <div class="container mt-3">
        <h3>Tooltip Example</h3>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
            Tooltip on top
        </button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
            Tooltip on right
        </button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
            Tooltip on bottom
        </button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
            Tooltip on left
        </button>
    </div>
    <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll(@@#[data-bs-toggle="tooltip"]@@#))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>
</body>
</html>

النتيجة :

المقال السابق

مربعات حوار Bootstrap 5

المقال التالي

اترك تعليقك

الاسم الكامل

البريد الإلكتروني

اضافة تعليق

حفظ