Hide on click

[Kivylius]

Hi I think it would make sense to hide these buttons on click as now (in chrome) there's a blue outline on click and once the button hides. Also this is the way it works in OsX and its really good UX.

This can be easily achieved by :active css selector. I can fork & update if you are willing to accept?

@Kivylius

[yanandcoffee]

I think this is an issue about the outline of the button and balloon? outline: 0 on the balloon and button would get rid of the blue outline on Chrome. On Android (Nexus 5x) Chrome, I also see a thin orange outline that makes the balloon a bit awkward looking. Setting outline to 0 or none would probably fix that. However, getting rid of the outline would be bad for accessibility so I would also recommend what @Kivylius suggested, to add an active/focused style on :active and :focus.

I will attach a screenshot later if anyone is curious ...

[kazzkiq]

@Kivylius @yanandcoffee My concern is exactly about accessibility. To prevent the awkward outline effect, the outline: none property would need to lie on the parent tooltip element. If this element is a button, link or any other interactive element, this would lead to users not knowing when it is focused (which is not a good thing).

I think its better to let the developer decide when removing it or not. If one really wants to remove the outline on a project, they could just add this rule at their CSS and its done:

[data-balloon] {
    outline: none;
}

Or maybe replace the outline with a better looking effect.

[Kivylius]

For static text is fine, but majority of people will be using this for button or links. Also what about a hiding on balloon on click :active & `:focus'?

[yanandcoffee]

@Kivylius It doesn't seem possible to disable this on only the balloon on-click without disabling it in general. If you do outline: none; on the :active, it doesn't do anything. If you do it on the :focus, it just disables it the same way as putting it on the parent tooltip element.

@kazzkiq I agree with you that I don't think there's any right way to solve this without hurting accessibility. I think that on mobile, people may be clicking for the tooltip, but the super thin line on Chrome is barely noticeable and purely aesthetic. On desktop, it seems more obnoxious, but it is possible for the developer to intentionally solve this with an override and for the developer to take responsibility of accessibility concerns. Here is one possible solution/suggestion for the styling of :focus and :active if you do want to take away the outline...

It's not possible to put a border around the little triangle from what I've tried, otherwise an overall border around the entire bubble may be a more visible style...

[Kivylius]

Yea the blue outline might have to stay. There is another issue that we are not addressing:

On hover on <button>; balloon shows, but once that same button is clicked balloon should hide itself.

[almadsen]

I know this is kind of an issue a little bit beside the discussion, but as the title say "Hide on click" I'm wondering how to make it hide on touch devices, because after click it stays visible.

[kazzkiq]

@almadsen That happens because when you touch the device's screen, the browser simulate the :hover effect (so mobile users can still interact with hover states somehow, even in mobile). Thats why the tooltip keeps visible, its like you were with your "mouse" still over where you tapped.

To avoid this kind of behavior in mobile browsers you can use one of those approaches:
http://stackoverflow.com/questions/2851663

[kazzkiq]

Also, closing this issue as it can be easily solved inside one's project by adding just a few lines of code:

[data-balloon] {
    outline: none;
}

As this may end up in accessibility/usability issues, I do not recommend doing this without a proper visual replacement for the outline attribute.