Wiki on how to style tooltips?

[ghost]

Tooltips are possible to customize, but they can't be inspected with a debug tool.
Example:

tooltip {
  color: black;
  background-color: white;
  text-shadow: none;
}

tooltip * {
  color: black;
  text-shadow: none;
}

But there is no way to inspect the elements to see what is inside those tags, so it's a guessing game for now.
For example, how do i change "today-format" element style in the "clock" module?

[poperigby]

I tried putting those snippets in my style.css but it didn't seem to change anything.

Edit: Nevermind, you're not supposed to have a # in front of tooltip.

[tasmo]

@poperigby Does it really work? On a quick code search I cannot find any input for style attributes for tooltips.

It would be great to have the possibility to stylize tooltips at all.

[poperigby]

Here's a CSS snippet:

tooltip {
     border-radius: 4px;
     background-color: #bd93f9;
}

Does that work?

[tasmo]

Thank you, almost. The color: property unfortunately does not.

[poperigby]

Sorry about that. Background color should be a hexadecimal, rgba, etc. value. I accidentally put in one of my defined colors.

[tasmo]

background-color works well even with a value coming from the GDK definition.

Just the foreground color does not work with any value not even a hexadecimal.

[poperigby]

Oh, then I misunderstood what you were saying.

[lokesh-krishna]

It's interesting how some properties work but some simple don't (font-family, font-size). What's the reason behind this behaviour?

[tasmo]

I found the solution for styling the foreground color:

tooltip label {
  color: @theme_fg_color;
}

Added to the Wiki in https://github.com/Alexays/Waybar/wiki/Styling/9c4f6a764f5469d08d6a20695121156ee93dd3e5.

[lokesh-krishna]

How can one get padding to work for tooltips? Adding it as follows doesn't work.

tooltip {
  padding: 5px;
}

[bd-g]

I wonder how big a refactor it would be to allow for tooltip config per module - for example, I want monospace font on some tooltips but not for others.

[ghost]

I wonder how big a refactor it would be to allow for tooltip config per module - for example, I want monospace font on some tooltips but not for others.

Is it a way to style tooltips on a per-module basis?

[FragCGI]

You can setup custom CSS for tooltip by doing this
tooltip {
background-color: transparent;
border: none;
}

tooltip label {
background-color: #color;
color: #color;
border-radius: ##px;
border: style ##px #color;
margin: ##px;
}

tooltip itself, for whatever reason, doesn't really accept any CSS settings, but tooltip label is the place to customize.
I haven't figured out how to do this for individual modules though.

[andeen171]

Nice, just the border-radius that doesn't seem to work

[nathanchere]

Don't forget that CSS specificity still applies here. If you're trying to style something and it seems to be ignoring some of your rules but not others, since there's no !important the next best thing is something like this:

window#waybar #tray menu {
  border: 3px solid @border;
 }

[Benschar1]

You can style tooltips on a per-module basis by using pango markup in the tooltip text. So for a module like this:

"custom/module": {
  "format": ...,
  "exec": "path/to/script",
  "tooltip": true,
  "return-type": "json"
}

and a bash script like this:

text=...
formatted_tooltip="<tt><span color=\"yellow\">${tooltip text...}</span></tt>"

printf '{\"text\":\"%s\", \"tooltip\":\"%s\"}' "$text" "$formatted_tooltip" \
    | sed 's/$/\\n/g' \
    | tr -d '\n'

you'll get a yellow, monospaced tooltip for this module, and default tooltip styling for other modules. Just be careful with bash escapes when interpolating strings to create the json object.

[Faervan]

Is it possible to add images to a tooltip?

[tmccombs]

Is it possible to target the tooltip for a specific module.

For example, to use a monospace font for the calendar tooltip for the clock module?

[AyushmanOfficial]

use a monospace font for the calendar tooltip for the clock module?

To do that for now you can do

"tooltip-format": "<tt><small><span size='12pt' font='GeistMono Nerd Font'>{calendar}</span></small></tt>"