Удалите всплывающую подсказку начальной загрузки 4 на странице прокрутки на мобильном телефоне и снова включите ее, нажав на значок переключения

Question

Я использую всплывающую подсказку bootstrap 4 и на мобильном устройстве, поскольку нажатие на них действует как указатель мыши и не исчезает, при прокрутке страницы всплывающая подсказка выглядит странно.

Чтобы исправить это, я скрываю всплывающую подсказку при прокрутке страницы, используя

$(window).on('scroll', function() {
    $('[data-toggle="tooltip"]').tooltip('hide');
});

, но проблема в том, что, когда я возвращаюсь к предыдущей позиции и нажимаю на переключатель, он выигрываетне показывайЯ нашел проблему, которая вызывает это. Это связано с тем, что наведение на иконку все еще не удалено, поэтому подсказка все еще есть. так же есть какой-то способ, которым мы можем удалить указатель мыши и из переключателя всплывающей подсказки, чтобы такая ситуация не возникала.

https://jsfiddle.net/gnor914d/5/ - это скрипка со сценарием.

Пожалуйста, используйте мобильный эмулятор Chrome, чтобы увидеть проблему.

Спасибо

Answer 1

Первое решение

Вы можете просто создать прослушиватель событий click, и это решит проблему следующим образом:

$(function () {
  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover',
  });

  $(window).on('scroll', function() {
    $('[data-toggle="tooltip"]').tooltip('hide');
  });

  $('[data-toggle="tooltip"]').on('click', function() {
    $(this).tooltip('show');
  });
});

Очевидно, вы должны рефакторинг этого кода. Это только для демонстрационных целей.

Проверьте пример рабочего кода здесь .

Второе решение

Редактировать 1:

Если вы хотите disable tooltip в целом на мобильное представление , вы можете проверить window.innerWidth , используя resize () jQuery и отключив его на mobile view примерно так:

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        trigger: 'hover',
    });

    $(window).resize(function() {
        isMobileView = '600';
        screenWidth = window.innerWidth;

        if (screenWidth <= isMobileView) {
            $('[data-toggle="tooltip"]').tooltip('disable');
        } else {
            $('[data-toggle="tooltip"]').tooltip('enable');
        };
    });
});

Теперь tooltip будет отключено на экранах с размером менее 600px

Проверьте пример рабочего кода здесь .

Третье решение

Редактировать 2:

Как вы и просили в своем комментарии, вы хотите disable поведение tooltip при наведении на только на мобильном экране . Я нашел другое решение для вашего варианта использования, мне больше нравится мое первое решение , поскольку оно также решает ваш вариант использования и требует меньше кода. Но в конце концов это ваш проект, и вы должны знать лучше меня.

Мое текущее решение следующее:

$(function () {
    const dataToggleTooltip = $('[data-toggle="tooltip"]');

    dataToggleTooltip.tooltip({
        trigger: 'hover',
    });

    disableTooltipOnHover = () => {
        dataToggleTooltip.hover( function(){
            $(this).tooltip('hide');
        });

        dataToggleTooltip.on('click', function(){
            $(this).tooltip('show');
        });
    };

    enableTooltipOnHover = () => {
        dataToggleTooltip.mouseenter(function(){
            $(this).tooltip('show');
        });
        dataToggleTooltip.mouseleave(function(){
            $(this).tooltip('hide');
        });
    };

    checkScreenViewIsMobile = () => {
        isMobileView = '600';
        screenWidth = window.innerWidth;

        if (screenWidth <= isMobileView) {
            disableTooltipOnHover();
        } else {
            enableTooltipOnHover();
        };
    }

    $(document).ready(function(){
        checkScreenViewIsMobile();        
    });

    $(window).resize(function() {
        checkScreenViewIsMobile();
    });
});

Если у вас есть какие-либо вопросы по поводу кода , дайте мне знать, и я объясню вам более подробную информацию.

Проверьте пример рабочего кода .