The best option to turn off tooltips based on device screen size is to add custom classes with the attribute data-bs-custom-class:

<button data-bs-toggle="tooltip"
        data-bs-title="Hide me on small screens"
        data-bs-custom-class="d-none d-md-block">
    Button text
</button>

To prevent Bootstrap tooltips on small devices, you can also use one of the following approaches:

1. Use CSS to Disable Tooltips on Small Screens

You can hide tooltips using media queries:

@media (max-width: 768px) {
    .tooltip {
        display: none !important;
    }
}

This will ensure that tooltips are not displayed on devices smaller than 768px (typical breakpoint for tablets and smartphones).

2. Use JavaScript to Disable Tooltips on Small Screens

You can programmatically disable tooltips when the screen width is below a certain threshold:

document.addEventListener("DOMContentLoaded", function () {
    if (window.innerWidth < 768) {
        var tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        tooltips.forEach(function (tooltip) {
            tooltip.removeAttribute('data-bs-toggle');
        });
    } else {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});

This script removes the tooltip functionality on small screens.

3. Override Bootstrap’s title Attribute on Small Screens

Modify the title attribute dynamically:

document.addEventListener("DOMContentLoaded", function () {
    if (window.innerWidth < 768) {
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
            el.removeAttribute("title");
        });
    }
});

This removes the tooltip title, preventing Bootstrap from showing tooltips on small devices.