Improve the UI of the popover

[prateekkalra]

No description provided.

[bbenefield89]

I believe a good idea to improve the UI is to set title attribute on each "button" that accurately describes that buttons action. While the Facebook and Twitter buttons are a little self-explanatory I found myself unsure of what the other three would do.

If not a title attribute how about a smaller popover in the same style as the original popover?

[prateekkalra]

@bbenefield89 Thanks for your suggestion, I'll certainly take that into consideration.

[bbenefield89]

@prateekkalra Of course and if you have any ideas I wouldn't mind helping out.

[prateekkalra]

@bbenefield89 About your suggestion , I can't really come up with a way to tell users what each option stands for , because a 'pop over' over another 'pop over' won't look good . So if you got an idea, that could help me.

[bbenefield89]

@prateekkalra Yea I didn't really like the "create another popover" idea either but if you were to add a title attribute with a short description, in my opinion, is easy to add and will give the user some direction as to what the button will do.

Examples

• COPY: This icon is really similar to my phones "update security" notification. Adding a short description "Copy Text" or "Copy text to clipboard" could solve this.

• SPEECH: This icon may seem more familiar to a user in terms of "I need to speak into a microphone" instead of "This will actually speak to me". This could also be solved by replacing the icon with something that resembles noise like this icon

[Thomdeleon]

@prateekkalra I wasn't sure if this issue was still open. I implemented the title attribute as suggested by bbenefield89. Please see the pull request. I also didn't update the minified file since I wasn't sure which program you used to minify it.

[prateekkalra]

@Thomdeleon This title attribute makes no difference to the user's look and feel(UI).
I was thinking of something which will help the user identify what each icon on the popover stands for, and I don't want to go for just a simple text as suggested by @bbenefield89.

[zackhitch]

Perhaps making the popover larger, with small text under each button indicating the use of each?

[Shai1436]

Can't we use tooltip for each icon? Something like this: tooltip demo
@prateekkalra Do you want complete sentences describing what each icon does?

[prateekkalra]

@Shai1436 Using tooltip won't be a good option as the tooltip would be shown every time whenever the user hovers over the option and the popover's UI won't be minimalistic anymore.
Showing the tooltip just for the first time user selects some text, can be considered though.

[Shai1436]

We could also replace some icons with simple text, just like selection option in android phones.

[hattifnatt4r]

Hello @prateekkalra, I would like to contribute.
How about adding 'help button' to the main popover? This button can open additional text field (like in 1st pic), or it can replace initial popover with the larger one that contains descriptions (2d pic).

[ankitverma2211]

@prateekkalra is anyone working on this ?

[saurabhnarhe]

Hello @prateekkalra, I would like to contribute.
I have done some simple work. Though not much changes but I think this looks clean and clear than the current one. Please have a look.

• Current One ->

• My Changes ->

Thanks.

[BeardedBry]

I'm interested in contributing to this.

[BeardedBry]

@prateekkalra
How about a simple title attribute? It is built in to the browser and takes a moment before showing up!

[MokhammadDaniyal]

@prateekkalra I have created a PR where I added a small pop up animation on selection #43