Default popover trigger option is click. But I need to change it to hover. It can be done like this:
$("#popover").popover({ trigger: "hover" });
But this doesn't make sense for smartphones. User can't read hover-triggered popover.
For "div" parts of my site, I use "visible-desktop" or "hidden-desktop". Can you offer a good way to
trigger popover with hover- for desktops
trigger popover with click- for smartphones/tablets.
(I use bootstrap 2.3.1)
Related:
Make Bootstrap Popover Appear/Disappear on Hover instead of Click
My best suggestion is to detect whether there is a touch event. If so ("no" ability for hovering), use "click"...if not, use "hover". Try this:
var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
$("#popover").popover({
trigger: is_touch_device ? "click" : "hover"
});
(the touch detection was taken from the Modernizr library)
What's the best way to detect a 'touch screen' device using JavaScript?
Detecting touch screen devices with Javascript
If you can upgrade to Bootstrap 3+, you can use this cleaner solution:
$('[data-toggle="popover"]').popover({trigger: 'hover click'});
Which will work with hover on desktop and click on mobile.
See: http://getbootstrap.com/javascript/#popovers - "You may pass multiple triggers."
I'm not sure if this was possible before using Bootstrap 2, as the accepted answer was from 2013. So if and when you can upgrade Bootstrap to version 3+, I would refactor it this way.
It should also be noted that twitter bootstrap 3 popovers are a mess right now. If you want only one open at a time and to be able to click anywhere else to close it, good luck - I found it pretty much impossible. There are still bugs open on their github page.
I implemented https://github.com/sandywalker/webui-popover in my production app and it works great.
EDIT (April 2020): A champion has emerged in the tooltip/popover space: Tippy.js (https://atomiks.github.io/tippyjs/). There is no reason to use anything else. Cheers to the developers responsible for this wonderful library!
Related
I'm not entirely sure if I understand how to detect touchscreens and change classes with Jquery. So anyway, I have a bootstrap nav menu with dropdowns that display on 'hover' on desktops. I have managed to disable the hover functions on touch devices using:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch"; }
Now I want to add back in the classes in the dropdown items that enable the toggle dropdown again. This is what I came up with:
$('.dropdown a').on('touchstart', function(){
$(this).addClass('dropdown-toggle');
$(this).data('toggle','dropdown');
});
Apparently it's working on ipad, but not on my kindle fire. Why would the first code above work, but the 2nd one here not?
'ontouchstart' is Apples way of handling touch events, so iOS only.
For all other devices you have to use 'onpointerdown'.
Eloquently addressed here, http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
a browser cannot truly detect if a touch capable display is present, so you have to assume all devices have touch capability and code appropriately.
To make it more complicated, trying to separate touch from click, goes out the window with a touchscreen laptop.
I wrote jQuery plugin that unifies touch/hover/click behavior for all devices that works exactly how you are approaching this. By swapping classes depending on what you are trying to do.
This article goes into more detail regarding how the browser is interpreting these different interactions. http://fallingmonocle.com/monocle-toggle.php
I'm looking to make a mobile menu which slides out from the right side of the page, displaying the appropriate navigation once it's displayed. Im using the sidr.js plugin to create the sliding transition and all of the navigation displays fine. I have the mobile menu fully functionality on the computer and the thing looks great and functions the way I want it to.
However, when I switch over to the mobile phone and go to the website, the navigation has a major flaw. I placed a button at the top of the navigation area that closes the side navigation when it's clicked. Below is the function that performs this task and on the computer it's fine. The problem is that it won't work in mobile!! Please help, I'm confused why this isn't working.
$(document).on('click', 'a.btn.btn-default.mobile-btn', function(event) {
event.preventDefault();
$("#responsive-menu-button").click();
});
You can also view the problem live at http://mgm702.github.io but you must be on a mobile device to notice the issue. Also, I have already tried the cursor: pointer; option among others and it hasn't worked.
I found a solution that worked for my particular situation. I was using the Sidr.js Plugin and one of the features is a built in function that closes the menu slider. I attached this to the function I was currently using, and this corrected the issue. The menu then worked with the mobile device touch interface. My final function looks like this
$(document).on('click touchstart', 'a.btn.btn-default.mobile-btn', function(event) {
event.preventDefault();
$.sidr('close','sidr-main');
});
I hope this anwser helps someone in the future dealing with this issue!
Adding data-role="button" to your responsive-menu-button should do the job.
I've looked around but I haven't found an answer to what seems to be a common problem.
I have a basic dropdown menu that is activated on hover (using hoverintent plugin for jQuery). It works fine for desktop browsers but for mobile devices that don't convert hover events to click as iPad does, it doesn't work. Here's the Javascript as it is now:
$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(
function() {
$(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
$(this).children('div').fadeToggle(fadeOutSpeed);
});
My question is: what is the cleanest and least problematic way to use clicks for mobile devices and hover for desktops for a dropdown menu? I had a couple ideas but not sure which:
Attach onclick event and disable hover every time there is a click.
Detect the ability to hover (not sure how this is done) and use a click handler if it's available.
At least iOS automatically interferes with the hover event when there is an event handler so you have to tap once for the hover event and a second time for any click event.
Detection for hove is trivial. Check if the client supports touch. If there is touch, there is no hover.
if ("ontouchstart" in document) {
// touch only code
} else {
// "desktop" code
}
By default iOs and some Androids implement a tap for hover event. It's handy, however, you need to make sure your top-level links lead to a valid anchor. The days of unclickable parent placers are gone and if that link leads only to a page with all the children listed as links, so be it. But make it go somewhere.
I have a form within an iframe on a website that I am testing on iPad. It seems that the touch events do not work on the inputs with type "text" or textarea elements. Swiping or touching does nothing on those areas and the keyboard does not pop up. The combo box (select) elements I can interact with just fine. Is anyone else having this problem?
I have no issues on iPad iOS 4.3 only on iPad iOS 5. The markup and styling are pretty standard, but if no one else is experiencing this issue I can post the code. The only unique element that I can think of is that all of the markup is loaded dynamically using jQuery tmpl.
I have only seen documentation online regarding scrolling of textareas but this seems to be a separate issue.
Correction *
I just hit the page directly (outside of the iframe) and am still having the same problem. So has anyone seen this behavior before? Is it due to strange CSS styling? Z-indexing?
OKAY GOT IT! So I noticed that click events were registering but default drag behavior was not. I also remembered that I had implemented a jquery ui extension for draggable behavior that hooked touch events into their click and mousemove event handling. That was the culprit. I removed that extension and added this instead : github.com/furf/jquery-ui-touch-punch This works on both iOS 4.3 and iOS 5.1
I guess that has to be a bug in iOS...
Or could you post a link to what you have made?
I could test it on my iPod Touch...
I've had this problem for days now, and from googling around, most of the internet has too. But none of the posts contained an answer. This is the solution that worked for me. It's based on https://gist.github.com/tamarasaurus/dcf2d0331043586421f3. Hopefully this will help people in the future, or at least point them in the right direction.
document.addEventListener('keydown', function(e) {
window.focus();
});
document.addEventListener('touchend', function(e) {
window.focus();
});
i have a question regarding jQuery mousemove() on iPhone. The problem is that it doesn't show the movement on iPhone when touches occur; the events are not working properly in Safari on iPhone.
Can I get any tips of any Javascript plugins to fix this or detect movement on iPhone?
You can use jQuery mobile and use the virtual events created by that plugin (vmousemove for example). More info on the events here.
However this framework is NOT compatible with every jQuery plug-in (for example some of jQuery-UI widgets are integrated in it, but in a different way). It probably works for plugin that are not event driven (i.e. that don't change the way the user interract).
An other choice is jQTouch but I don't know much about it.
You should use the touchmove event. Example of usage:
$('#selector').bind('touchmove', function(event)
{
// your code...
});