Icon's name in tooltip

[denis-roy]

Description

Just thought of this small quality-of-life improvement: showing the icon's name in a tooltip.

Showing the name while hovering for a few seconds over an icon could help us remembering what to search for when we want to reach for a specific one.

Like this box. I mean cube. I mean ... cardboard box? Oh no it's "Deployed Code", right 😅

Thanks!

Affected Desktop Environments

All

Additional Information

No response

[Schneegans]

That's a good idea!

[pushkardev123]

Can i get assigned to this ?

[Schneegans]

@pushkardev123 thanks for looking into this! Let me know if you need any assistance!

[pushkardev123]

Thank you very much! I am just a beginner programmer exploring around to learn new things. I will get right into this issue !

[denis-roy]

Wow, such spirit! Thank you @pushkardev123 ! Hope you learn a bit and have some fun in the process :)

I wonder if https://kushagra.dev/lab/hint/ could be an inspiration or a good starting point?

[pushkardev123]

Thanks! Can i get a bit more assistance about the starting point? It would really be of great help.

[pushkardev123]

i get this idea of adding css and using js to refine the feature more, but i can't really be sure where to start, can i get any assistance for that?

[denis-roy]

Yes @pushkardev123 I will try to have a look at it during my lunch break and see if I can propose a way forward :)

If we can integrate bits of the above hint.css project into kando, we might not even need much js/ts

[Schneegans]

In Kando's editor, you can use Bootstrap, which comes with tooltips already. So there is no need for another tooltip library. They are also used in Kando in some places already. Like here: https://github.com/kando-menu/kando/blob/main/src/renderer/editor/properties/templates/condition-picker.hbs#L42

So you would need to add such properties to the icon picker buttons. They are created here: https://github.com/kando-menu/kando/blob/main/src/renderer/editor/properties/icon-picker.ts#L181

Finally, you will need to enable the the tooltips with something like:

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((elem) => {
  new Tooltip(elem, {
    delay: { show: 500, hide: 0 },
  });
});

However, maybe not on the whole document but rather only on the icon picker div.

Is this a good starting point? Or is something not quite clear?

[pushkardev123]

Oh great! Got it. Thanks for the help. Just woke up, will get right into it.

[pushkardev123]

i have added attributes to the icondiv and there names as attribute to show on tooltip, can i run this project with npm? I need a little bit guidance over there, i wanted to customise the delay and style .

[Schneegans]

It's all described here: https://github.com/kando-menu/kando/blob/main/docs/installing.md#b-manual-installation

Let me know if you need any further advice.

[denis-roy]

Cool! Did not know we already had tooltips via Bootstrap 🥾

Tried to make sense of the code but ran out of lunchbreak time just as I found out the developer tools button has a tooltip :)

And yes @pushkardev123 npm start will fire your modified kando up, once you are setup'ed

[pushkardev123]

my npm start is running fine and i m getting just one warning on my localhost which is related to macos and im currently in windows, but i cant see the full version of the application running, can i get some help?

[Schneegans]

When you run npm start, Kando will be running. Then press one of your configured shortcuts, Ctrl+Space if you haven't change anything. This should open up the menu :smile:

[pushkardev123]

oh cool. i didnt get that before, can you please review my pull request and give me insights about it? Ive tried my best with it so far, looking forward for more insights to improve

[Schneegans]

Thank you! Yes, I'll do that... tomorrow 😉😴

[denis-roy]

Ah... Yes, easy as pie :)

I did put the data-bs-toggle="tooltip" directly into icon-picker.hbs though, might not be the best way?

I needed to figure out the new Tooltip(iconDiv, { delay: { show: 500, hide: 0 }}); bit, but you just gave it to us on a silver pie plate :)

So...

😁

I'll llet @pushkardev123 wrap his PR up and I might attempt to style it in a different PR down the road, now it's my turn to sleep!

[Schneegans]

Cool! Yeah, I think it's actually better to put it into the Handlebars template. I mean, it's the same attribute for each item anyways.

However, your tooltip does not look like a bootstrap tooltip :thinking:

Something must still be not fully right with the initialization. Have you checked the console output in the dev tools? Maybe the bootstrap-tooltip import is missing?

[pushkardev123]

@Schneegans can you help me with the macOS problem? I have left a comment in the PR

[denis-roy]

However, your tooltip does not look like a bootstrap tooltip 🤔

Yes, that's why I thought I had to style it properly, it did not look the same way as the dev tools tooltip and appeared at the cursor location rather than above.

Something must still be not fully right with the initialization. Have you checked the console output in the dev tools? Maybe the bootstrap-tooltip import is missing?

import {Tooltip} from "bootstrap"; is there at the top of icon-picker.ts but I was doing the new Tooltip... before the iconDiv.setAttribute..., swapping these lines fixed it:

The dev tools prints this even before I open the icon picker, but otherwise did not complain:

VM4 sandbox_bundle:2 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
  Policy set or a policy with "unsafe-eval" enabled. This exposes users of
  this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
warnAboutInsecureCSP @ VM4 sandbox_bundle:2

I checked and your v1.1.0 does not print the above. Curiosity: could it be because I'm running from npm start instead of from a proper build?

[Schneegans]

I checked and your v1.1.0 does not print the above. Curiosity: could it be because I'm running from npm start instead of from a proper build?

Exactly. I have not yet checked what the reason for this warning is. Maybe it's easy to fix...

[Schneegans]

Resolved in #500. Thanks again!