Twitter bootstrap popover trigger для настольных и мобильных платформ

Значение по умолчанию popover. Но мне нужно изменить его на зависание. Это можно сделать следующим образом:

$("#popover").popover({ trigger: "hover" });

Но это не имеет смысла для смартфонов. Пользователь не может читать полет с включенным зависанием.

В разделе "div" моего сайта я использую "" видимый рабочий стол " или" скрытый рабочий стол". Можете ли вы предложить хороший способ триггер popover с зависанием - для рабочих столов триггер popover с кликом для смартфонов/планшетов. (Я использую bootstrap 2.3.1)

по теме: Сделать Bootstrap Popover появляться/исчезать при наведении вместо клика

Ответ 1

Мое лучшее предложение - определить, есть ли сенсорное событие. Если это так (способность "нет" для зависания), используйте "click"... если нет, используйте "hover". Попробуйте следующее:

var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
$("#popover").popover({
    trigger: is_touch_device ? "click" : "hover"
});

(обнаружение касания взято из библиотеки Modernizr)

Каков наилучший способ обнаружения устройства с сенсорным экраном с использованием JavaScript?

Обнаружение устройств сенсорного экрана с помощью Javascript

Ответ 2

Если вы можете перейти на Bootstrap 3+, вы можете использовать это более чистое решение:

$('[data-toggle="popover"]').popover({trigger: 'hover click'});

Что будет работать с зависанием на рабочем столе и нажмите на мобильный.

Смотрите: http://getbootstrap.com/javascript/#popovers - "Вы можете передавать несколько триггеров".

Я не уверен, что это было возможно до использования Bootstrap 2, поскольку принятый ответ был с 2013 года. Поэтому, если и когда вы сможете обновить Bootstrap до версии 3+, я бы реорганизовал его таким образом.

Ответ 3

Следует также отметить, что twitter bootstrap 3 popovers - это беспорядок прямо сейчас. Если вы хотите только один открытый за один раз и чтобы иметь возможность щелкнуть в другом месте, чтобы закрыть его, удачи - я нашел его практически невозможным. На странице github все еще есть ошибки.

Я реализовал https://github.com/sandywalker/webui-popover в своем рабочем приложении, и он отлично работает.