Billboard.js: Edge shows tooltip, chrome doesn't

[bahrus]

I'm working on wrapping the billboard.js library as a web component. Feel free to take over if this is something you would prefer to support!

Anyway, I noticed with the first example that in Edge, when I hover over data points, I see a tooltip box showing details, but not Chrome (I'm only testing on Windows).

I assume this is a bug?

[netil]

@bahrus, it's great to hear that!

BTW, I tested on the latest chrome(v.60.0.3112.90) for windows, and as you can see below, I couldn't notice any issues that you mentioned.

What was the exact version? or checkout if is working updating to the latest.

[bahrus]

Correct, my mistake. But I'm consistently seeing the behavior I describe via the web component. I suspect this is because Chrome supports Shadow DOM natively, and Edge doesn't. Edge is currently using a polyfill, and somehow the Edge polyfill seems to impose a less tight seal, so some code that isn't right in the shadow DOM context continues to work.

So the question is, are you interested in modifying your code so it will work properly in a Shadow DOM setting, if my observations are correct?

Or do you want me to experiment with my copy and see if I can get it to work, and if so just indicate what changes to make? or should I do a fork and make a pull request if I can find a solution (no guarantees!)?

[netil]

Currently we're considering to be used in normal cases, and it wasn't seriously considered yet like webcomponent's environment at all. But giving a variety of options are always right! and webcomponent also count in that terminology.

The best way to approach this, is giving us a contribution to solve & improve the code, which how opensource works.

So, don't hesitate making a PR or if you need some help just let me know(by commeting, opening a issue, etc.).
I can't guarantee to lookup in short period of time, but we're always open to hear from the users(community) to make improvements.

[bahrus]

Apologies, I was a bit too quick to confirm your observation that the tooltip works. I'm running all my non-webcomponent tests off the public site

With Chrome (I have the same version as you), if I touch my touchscreen with my finger on the imaginary vertical line between two points, I see the tooltip. It remains until I take some other action. But using my mouse, nothing happens.

With Edge, using my mouse, I can hover over, and I see a tooltip. I can click also.

But if I touch with the touchscreen, the tooltip appears, then quickly goes away.

Can you point out the key parts of the code where this functionality is implemented?

[netil]

The interaction related function are written in interaction.js.
It binds events according the inputType in below lines.

• for mouse event:
  https://github.com/naver/billboard.js/blob/master/src/interactions/interaction.js#L415
• for touch event:
  https://github.com/naver/billboard.js/blob/master/src/interactions/interaction.js#L144

During the mousemove/touchmove it has following call flow respectively.

• mousemove/touchmove event handler --> selectRectForSingle --> showTooltip

[djpeterson83]

Hey there, I've recently run into this issue as well. Sadly, I don't have anything to add other than I've mysteriously lost tooltips across all installations of Billboard, my own and 3rd party hosted. I'm not doing anything particularly weird and am not seeing any errors. This has affected Chrome and Firefox, and as bahrus has stated, tooltips work fine in Edge.

Chrome version: 60.0.3112.101

[djpeterson83]

Did some code digging. It looks like the isTouch variable is being set to true because it is detecting 'ontouchstart' in Chrome and Firefox. Turns out Firefox has a setting that allows you to disable touch controls completely, but I don't know what this setting is set to at default (mine seemed to be '2' instead of '0'). As for Chrome, I don't know if there's a way to switch it off, but frankly that seems like a bad solution as it would require site users to get into the deep, dark crevices of their browser configs to disable touch. Might it be best, instead, to detect for mouse inputs instead of touch and flip the logic? I don't know if this just reverses the problem as native touch devices might still provide stubs for 'onmouseenter' and friends.

Anyway, I hope this helps!

[netil]

@djpeterson83 thanks for the looks and sharing.
I think there're ambiguity on that, because mouse and touch input types are enabled by default.

But in the case for devices wihch has both types support, what should be the main input type(or it should be supporting two)? It needed to be organized.

For now, just set touch option false as below. I think it will work.

interaction: {
    inputType: {
        touch: false
    }
}

[djpeterson83]

Since I don't really have anything mobile to test on right now, I can't confirm this, but I would assume that a touch-only device may not have the mouse events? If that's the case, then I'd say if both are available then use the mouse events? This seems logical to me, but if mouse events are on mobile devices as well, then this isn't going to work either. I feel your pain. I did a lot of research into Modernizr in the hopes of finding a fix for this, and they apparently were struggling with this problem too.

Thanks for looking into this!

[netil]

Well, me either can't clarify on this, but there're laptop devices which has mouse and touch screen support(ex. running windows with touch screen). I don't have those devices right now for the test, but I'm guessing it is happening on that environments.

The priority of the events in billboard.js are : touch > mouse. It means that if device supports touch, it binds touch events rather than mouse, so in this case even you are do mouse moves over chart those events will not responding, because they aren't binded.

It sounds logical supporting both, when device supports touch and mouse, but the problem is on mobile devices also fire mouse events in normal touch sequence. This is the reason making difficult to distinguish what the user event intentions are.

I did some research before on event frings and maybe it will help to understand.

• Case: when user touches the screen and put finger up:

iOS 9:
touchstart -> touchend -> mouseover -> mousemove -> mouseout (happens when focus is moved)

Android 5.1.1(Galaxy S6 Edge)
touchstart -> touchend -> mouseover -> mousemove -> mousedown -> mouseup -> click -> mouseout (happens when focus is moved)

Maybe we need to find a nice way to fix this, like adopting pointer events for the future release.

[djpeterson83]

Just a quick update. My Chrome has updated to 60.0.3112.113 and suddenly tooltips are working again. Not sure if this is a temporary thing or not. I'm going to keep an eye on it.

[netil]

@djpeterson83 thanks for update. If you have any doubts or something to consider, don't hesitate to do that. I'll try keep this issue either.

[bahrus]

Seems to work in web component now as well.

[netil]

Hmm... weird. Anyway, thanks @bahrus for sharing.

[shrijanshukla89]

I noticed the same thing. Tooltips don't work on an older version of chrome, but work on the latest version.

[netil]

Seems on IE9 not responding on mouseover event

[lbayerl]

Sorry, vote to reopen this issue. Tooltips not working for me with Chrome Version 64.0.3282.140 (Official Build) (64-bit)

[netil]

@lbayerl, could you provide full environment info?
I have no issue on Chrome v64.0.3282.140 (Windows 7 & macOS 10.13.1)

[porfirioribeiro]

I am also facing the same problem with Chrome on a Windows PC with touch screen.

Is there any workaround to solve this issue?

[porfirioribeiro]

My workaround for now was disable touch for non Android or iOS devices.
Now mouse events works on PC with touchscreen, but touch events do not, but still it's better this way.
I hope this can be fixed later.

[lbayerl]

Yes, it happened to me on Ubuntu LTS 16.04 with Chrome Version 64.0.3282.140 (Official Build) (64-bit), but as @porfirioribeiro said I also have a notebook with a touchscreen support indeed. There are no issues at all with c3.js (at least in 'mouse mode').

@porfirioribeiro what do you mean by 'disable touch' as a workaround?

Does it make sense to re-open this issue or create a new one for this topic?

[porfirioribeiro]

I did this as a workaround to disable touch on non mobile devices:

      interaction: {
        inputType: {
          // Todo remove this workaround when billboard fixes the issue
          touch: /Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent),
        },
      },

Its a crappy one, but works until it is fixed

[netil]

It should find a way which

• when has a real 'mouse' input, prioritize mouse weather has touch input also(like desktop OS devices with touch screen)
• when has only touch, use touch only

BTW, @lbayerl C3.js don't have this issue, because lack of touch support. C3.js binds mouse events only.