search

alanzanattadev / atom-docker

Docker Integration for Atom.io
MIT License
48 stars 11 forks source link

Add tooltips to buttons #4

Closed heyvito closed 7 years ago

heyvito commented 8 years ago

This adds tooltips to each interface button, in order to give a tip of what they mean, when hovering them.

screen shot 2016-05-21 at 2 20 41 pm
alanzanattadev commented 8 years ago

Cool feature ! haven't thought by myself :D can you style it a little more to match with the rest of the package ? black background with green border and white color should be beautiful :)

heyvito commented 8 years ago

I just added a title property to the buttons; The style is managed by the OS. We can embed a css tooltip framework to customise it, like chinchang/hint.css :)

I can get back on this tonight or tomorrow, and will update this PR asap. :) :+1:

heyvito commented 8 years ago

Hey @alanzanattadev! I'm afraid I can't go further on this, since I'm not familiar with React. Using hint.css interferes with your :before and :after declarations for the icons, but I know that Atom has a builtin Tooltip manager, and its documentation is available here. I tried to use it, but I'm not sure how to get the DOM instances of the buttons created by React. I surely can go further on this, if you take some time to explain how to get them. :)

alanzanattadev commented 8 years ago

You can get a reference on the button by setting ref={elem => this.buildButton = elem} attribut on the build button for example and then addTooltip(this.buildButton, {title: "my title"} :) the addTooltip must be in componentDidMount method because of the lifecycle of a react component. Don't forget to check if atom API are available in the component to make sure it's reusable. :)

alanzanattadev commented 8 years ago

Hey @victorgama ! Have you been able to look into this ?

gfviegas commented 7 years ago

This is a must-have actually!