Improve special character label styling

[mlewand]

📝 Provide a description of the new feature

In this release we decided to go with simplified labels (by using browser's title attribute) for special characters in the grid:

Reason we didn't use our good-looking tooltips is that grid has a hidden overflow in the CSS, this means that any labels shown at the edge would have the tooltips cropped.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[oleq]

I propose the following compact solution since we cannot use the standard tooltips due to overflow issues:

PoC is in two branches and only tests are missing:

• https://github.com/ckeditor/ckeditor5-special-characters/compare/i/5817?expand=1
• https://github.com/ckeditor/ckeditor5-theme-lark/compare/i/5817?expand=1

cc @dkonopka

[mlewand]

@oleq Looks fine. There's one detail though, is there any value in putting the character code? For most of mortal users this is unclear and confusing, while people who really, really need it will know how to check the character code.

[oleq]

is there any value in putting the character code?

I figured, if Google Docs offers it and there's unused space left in our "info bar", then why not.

[mlewand]

TBH, IMO it still doesn't sound like it would be much of use for the end user.

[oleq]

I agree it's a gimmick. Do you have any other idea how to make use of this space?

[Reinmar]

@pomek, could you try to port @oleq's changes to current master? There are conflicts obviously due to the UI part being merged into the core part of the plugin. I think we liked the concept and if there's not much work to be done there, it'd be great to finish the effort. 

I'm reassigning the ticket to you.

[pomek]

What should I do with the "character code" section?

[Reinmar]

Since Olek proposed it, let's have it. I agree it doesn't bring much value but without it the layout will be weird. We can iterate on this to find the best solution, but for now let's have something.