How to change tooltip background color in Unity?

Question

In a lot of applications the tooltips are just plain ugly (White text on black background, way too much contrast) or even unreadable (black or dark blue text (Hyperlinks) on black background). I want to change the background color of the tooltips to some medium gray or even some yellow or something like that, maybe even something semi-transparent.

Here is a screenshot of Eclipse which displays some source code in a tool tip with black text on black background:

Switching to a different theme (Something other than Ambiance or Radiance) helps but I like Ambiance and I want to keep it. It's just this darn tooltip color which is absolutely unacceptable.

I found several solutions for older Ubuntu versions but they no longer work with Unity in Ubuntu 11.10 because I can't find any function to customize the Ambiance or Radiance theme. So how do I do that in the current Ubuntu version?

Answer 1

Install and open gnome-color-chooser .

Go to Specific → Tooltips and put black foreground over pale yellow background.

Answer 2

Found it!

I had to edit these files:

/usr/share/themes/Ambiance/gtk-3.0/settings.ini
/usr/share/themes/Ambiance/gtk-3.0/gtk.css
/usr/share/themes/Ambiance/gtk-2.0/gtkrc

(Addition: for Ubuntu 12.04, it seems youjust have to modify the file: /usr/share/themes/Ambiance/gtk-2.0/gtkrc , replacing the tooltip backround and foreground color, with the #000000 and the #f5f5b5 color, respectively)

You require root privileges to edit the files. Use gksudo gedit to edit them.

Search for tooltip in these files and you'll find the color definitions for the foreground and the background. I use #000000 as foreground and #f5f5b5 as background and now the tooltips in all applications are again readable. After changing the color values simply switch to some other theme and then back to Ambiance and the tooltip color is now fixed.

Here is the result:

Answer 3

If you want to change the tooltip colors for all apps then install and run gnome-color-chooser and go to Specific tab > Tooltips. Check the boxes for Foreground and Background and choose colors.

How it works (you can do this manually):

gnome-color-chooser adds the following to your ~/.gtkrc-2.0:

include ".gtkrc-2.0-gnome-color-chooser"

and ~/.gtkrc-2.0-gnome-chooser:

style "gnome-color-chooser-tooltips"
{
  bg[NORMAL] = "#FFFFAF"
  fg[NORMAL] = "#000000"
}
widget "gtk-tooltip*" style "gnome-color-chooser-tooltips"

If you just want to change the tooltip colors for a single app, such as eclipse, then put the above text into a custom gtkrc file (e.g. ~/gtkrc-eclipse) and start eclipse with GTK2_RC_FILES=~/gtkrc-eclipse eclipse

Answer 4

I created a small script that does that for you

#/bin/sh
# Tooltip fix
# A script to fix themes files in Ubuntu 11.10
#  to have readable tooltips in applications such
#  as eclipse.
# The script edits the gtk.css, settings.ini and gtkrc files
# Author: Victor Pillac
# http://victorpillac.wordpress.com

if [[ $EUID -ne 0 ]]; then
  echo "This script must be run as root" 1>&2
  exit 1
fi  

path=/usr/share/themes
theme=Ambiance

if [ $# = 1 ]; then
  theme=$1
fi

echo "Fixing tooltips for theme $theme"
echo " (you can select a different theme by passing its name as argument)"
sed -i 's/tooltip_bg_color #000000/tooltip_bg_color #f5f5b5/g' $path/$theme/gtk-3.0/gtk.css
sed -i 's/tooltip_fg_color #ffffff/tooltip_fg_color #000000/g' $path/$theme/gtk-3.0/gtk.css
sed -i 's/tooltip_bg_color:#000000/tooltip_bg_color:#f5f5b5/g' $path/$theme/gtk-3.0/settings.ini
sed -i 's/tooltip_fg_color:#ffffff/tooltip_fg_color:#000000/g' $path/$theme/gtk-3.0/settings.ini
sed -i 's/tooltip_bg_color:#000000/tooltip_bg_color:#f5f5b5/g' $path/$theme/gtk-2.0/gtkrc
sed -i 's/tooltip_fg_color:#ffffff/tooltip_fg_color:#000000/g' $path/$theme/gtk-2.0/gtkrc
echo "Done"

Answer 5

I've adopted a slightly different solution;

First create a new script, eclipse.sh, that starts eclipse, mine look like this:

#!/bin/bash
GTK2_RC_FILES=/usr/share/eclipse/gtkrc-2.0-eclipse /usr/share/eclipse/eclipse

Then create the gtkrc file (/usr/share/eclipse/gtkrc-2.0-eclipse), mine look like this (it have some other changes as well to make better use of the screen):

style "my-tooltips"
{
  bg[NORMAL] = "#FFFFAF"
  fg[NORMAL] = "#000000"
}
widget "gtk-tooltip*" style "my-tooltips"

style "gtkcompact" 
{
    font_name="Ubuntu Light 11"

    GtkButton::default_border={0,0,0,0}
    GtkButton::default_outside_border={0,0,0,0}
    GtkButtonBox::child_min_width=0
    GtkButtonBox::child_min_heigth=0
    GtkButtonBox::child_internal_pad_x=4
    GtkButtonBox::child_internal_pad_y=4
    GtkMenu::vertical-padding=1
    GtkMenuBar::internal_padding=0
    GtkMenuItem::horizontal_padding=4
    GtkToolbar::internal-padding=1
    GtkToolbar::space-size=1
    GtkOptionMenu::indicator_size=0
    GtkOptionMenu::indicator_spacing=0
    GtkPaned::handle_size=4
    GtkRange::trough_border=0
    GtkRange::stepper_spacing=0
    GtkScale::value_spacing=0
    GtkScrolledWindow::scrollbar_spacing=0
    GtkExpander::expander_size=10
    GtkExpander::expander_spacing=0
    GtkTreeView::vertical-separator=0
    GtkTreeView::horizontal-separator=0
    GtkTreeView::expander-size=10
    GtkTreeView::fixed-height-mode=TRUE
    GtkWidget::focus_padding=0
    GtkTreeView::vertical-separator = 0
}

class "GtkWidget" style "gtkcompact"

style "gtkcompactextra" 
{
    xthickness=0
    ythickness=0
}

class "GtkButton"   style "gtkcompactextra"
class "GtkToolbar"  style "gtkcompactextra"
class "GtkPaned"    style "gtkcompactextra"
class "GtkNotebook" style "gtkcompact"

Answer 6

For CDT do the following:

Window>Preferences>C/C++>Editor: Appearance Color Options>Source Hover Background

Uncheck System Default, and select a color.

Unfortunately there's no Eclipse-wide setting that I know of. Pretty lame. You shouldn't have to set stuff like that for every perspective.

Answer 7

I think this one is solved. I got it showing the tooltip with black letters on white background. In my case, it seems that Eclipse is using settings fot tooltips from gtk-2.0/gtkrc file from theme directory.

My setup: Ubuntu 12.04, Gnome (Not Unitiy), Eclipse Indigo (3.7), GrayDay theme for Gnome. The name of theme and theme itself is not importat.

Open the terminal, change to the theme directory (cd $HOME/.themes) and there, go to the directory of your theme. If your .themes direcotry if empty of it doesn't exist, then, you are using system theme which is in /usr/share/themes. Just figure out the name of the theme you are using (right click on bakcground, choose Change Desktop Background, the theme name should be in the lower right corner. If it says nothing about theme name, then use gnome-tweak-tool to find out which theme you are using).

In the theme directory, issue this command:

grep -r tooltip *

it should list all of the files and lines where keywork "tooltip" is mentioned. Change every background (tooltip_bg_color) to #ffffff and every foreground to #000000. Black latters on white foreground, this is what we want! Especially, change values in the gtk-2.0/gtkrc file.

Mistake I was doing, is chainging tooltip color in the gtk-3.0 directory, which didn't have any effect.

Now, go to the Eclipse, Window -> Preferences -> Java -> Editor and set Source Hover Background to the "System color" (check on the right). Restart the Eclipse!

This is listig of grep -r tooltip * from my theme directory after doing changes:

gtk-2.0/gtkrc:gtk-color-scheme  = "tooltip_fg_color:#000000\ntooltip_bg_color:#ffffff\nlink_color:#0033ff"
gtk-2.0/gtkrc:style "tooltips" {
gtk-2.0/gtkrc:  bg[NORMAL]  = @tooltip_bg_color
gtk-2.0/gtkrc:  fg[NORMAL]  = @tooltip_fg_color
gtk-2.0/gtkrc:  GtkWidget::new-tooltip-style    = 0
gtk-2.0/gtkrc:# The window of the tooltip is called "gtk-tooltip"
gtk-2.0/gtkrc:widget "gtk-tooltip*"             style "tooltips"
gtk-3.0/gtk.css:/* @define-color tooltip_bg_color #343434; */
gtk-3.0/gtk.css:/* @define-color tooltip_fg_color #ffffff; */
gtk-3.0/gtk.css:@define-color tooltip_bg_color #ffffff;
gtk-3.0/gtk.css:@define-color tooltip_fg_color #343434;
gtk-3.0/gtk.css:@define-color theme_tooltip_bg_color @tooltip_bg_color;
gtk-3.0/gtk.css:@define-color theme_tooltip_fg_color @tooltip_fg_color;
gtk-3.0/gtk-widgets.css:.tooltip {
gtk-3.0/gtk-widgets.css:    background-color:   @theme_tooltip_bg_color;
gtk-3.0/gtk-widgets.css:    color:              shade(@theme_tooltip_fg_color, 0.90);
gtk-3.0/gtk-widgets.css:.tooltip * {
gtk-3.0/gtk-widgets.css:    background-color: @theme_tooltip_bg_color;
gtk-3.0/settings.ini:gtk-color-scheme   = "tooltip_fg_color:#343434\ntooltip_bg_color:#ffffff\nlink_color:#4a90d9"
gtk-3.0/settings-default.ini:gtk-color-scheme   = "tooltip_fg_color:#343434\ntooltip_bg_color:#ffffff\nlink_color:#4a90d9"

Answer 8

My tooltips are black-on-yellow. See screenshot below from Ubuntu 16.04 LTS with MATE DE:

If you like such color combination, use 2 gtkrc (1 for GTK3, 1 for GTK2) files below:

mkdir -p ~/.config/gtk-3.0/
cat << EOF >> ~/.config/gtk-3.0/gtk.css
/* tooltips */
@define-color tooltip_bg_color #ffffaf;
@define-color tooltip_fg_color #000000;
tooltip label,
.tooltip label {
    text-shadow: none;
}
EOF
cat << EOF >> ~/.config/gtk-3.0/settings.ini
[Settings]
gtk-color-scheme = "tooltip_bg_color:#ffffaf\ntooltip_fg_color:#000000"
EOF

cat << EOF >> ~/.gtkrc-2.0
style "gnome-color-chooser-tooltips"
{
  bg[NORMAL] = "#FFFFAF"
  fg[NORMAL] = "#000000"
}
widget "gtk-tooltip*" style "gnome-color-chooser-tooltips"
EOF

The 3rd file is only for GTK2-based applications.

The method above was tested on Ubuntu 14.04 LTS (Unity and GNOME), Ubuntu 16.04 LTS (Unity, GNOME, MATE), Ubuntu 18.04 LTS (Unity, GNOME, MATE), Ubuntu 20.04 LTS (MATE).

Answer 9

There is also another solution to this: use dconf-editor to find the following key:

org->gnome->desktop->interference->gtk-color-scheme

whose description said: A \n separated list of name:color as defined by the gtk-color-scheme setting.

Write the scheme in gedit in the style likes the following(this example is mine), then paste it in the dconf-editor(notice the '\n' at each end of the line):

fg_color:#4c4c4c4c4c4c
bg_color:#f2f2f1f1f0f0
text_color:#3c3c3c3c3c3c
base_color:#ffffffffffff
selected_fg_color:#ffffffffffff
selected_bg_color:#f0f077774646
tooltip_fg_color:#ffffff5a0e74
tooltip_bg_color:#14a784edd8b6

and the problem will be solved immediately.

Answer 10

I was having same problem (Xubuntu 12.04, Greybird theme, Eclipse Indigo) and Mihael K's answer worked for me. The only file I changed was gtk-2.0/gtkrc and I only changed one line. The third line after the initial comments. Changed the hex color values of tooltip_bg_color:#000000 to tooltip_bg_color:#ffffe1 and tooltip_fg_color:#ffffff to tooltip_fg_color:#000000. So the line will look like this:

gtk_color_scheme        = "tooltip_bg_color:#ffffe1\ntooltip_fg_color:#000000" # Tooltips.

Restarted elipse and tooltips are now the yellowish color I'm accustomed to. I didn't need to do any further tweaks in eclipse or any of the other files.

Answer 11

On ubuntu 12.10 (quantal) you can use the following two commands:

#foreground white => black
sudo sed -i s/tooltip_fg_color:#ffffff/tooltip_fg_color:#000000/g  /usr/share/themes/Ambiance/gtk-3.0/settings.ini /usr/share/themes/Ambiance/gtk-3.0/gtk.css /usr/share/themes/Ambiance/gtk-2.0/gtkrc
#background black => yellow
sudo sed -i s/tooltip_bg_color:#000000/tooltip_bg_color:#f5f5b5/g  /usr/share/themes/Ambiance/gtk-3.0/settings.ini /usr/share/themes/Ambiance/gtk-3.0/gtk.css /usr/share/themes/Ambiance/gtk-2.0/gtkrc

(Thanks to the other answers that helped me to figure this out!!)

Answer 12

This answer is to point out a rare case where a very similar bug occurs if you have installed xulrunner and configured eclipse to use it.

I installed xulrunner to make the GPE Designer to properly render GWT UIs in the design mode, which worked very well but I found it also broke the tooltips. The bug is actually worse than the screenshot above, it just display a blank tooltip.

To fix it you only have to remove the xulrunner parameter from eclipse.ini:

-Dorg.eclipse.swt.browser.XULRunnerPath=/path/to/xulrunner/

It worked for me with Ubuntu 12.04, Eclipse 4.2/Juno and xulrunner 1.9.2

Answer 13

For elementary users:

Go to /usr/share/themes/elementary/gtk-3.0, edit the file gtk-widgets.css with sudo nano, type Ctrl + W to find Tooltips, and then at the background-color: alpha(#color, #opacity) change the color to something like #f5f5b5 and set opacity to 1.

Answer 14

A more user-friendly way to change the background is using the UI. Open System, Preferences, Appearance. By default "Ambiance" theme will be selected, but you can change it for any theme. Click on Customize button below and switch to Colors tab. There you can change foreground and background colors for tooltips by clicking on appropriate boxes.

Answer 15

To open Appearance window with Tab: Themes direct from root@ terminal write (you can use this command also for script):

sudo -u USER gnome-appearance-properties -p theme

where USER is your current user on the desktop. It will open Appearance correctly, but you still need to click on theme displays in Appearance window to launch your theme.

For the test with install theme: Dust from root@ terminal, command:

sudo -u USER gnome-appearance-properties -i /home/USER/Desktop/Dust-0.4.tar.gz

gets this error:

(gnome-appearance-properties:16161): Gtk-WARNING **: Unable to locate theme engine in module_path: "murrine"

but if theme: Dust is installing by chosing menu: System/Preferences/Appearance and installs from Appearance window , installation of the theme: Dust is correct.

There is needed command responsible for choosing themes in Appearance window, but I can't find it.

Answer 16

I'm running Kubuntu 16.04 with the Breeze theme, and Eclipse 4.6.1 with the default GTK3 now that they've fixed the button padding issue.

To attain hover tooltips with light grey background and black foreground I made a few changes to /usr/share/themes/Breeze-gtk/gtk-3.0/gtk.css; here's what I ended up with:

/************
 * Tooltips *
 ************/
.tooltip {
  color: #000000;
  padding: 4px;
  box-shadow: none;
}
.tooltip.background {
    background-color: #f5f5f5;
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

And the original:

/************
 * Tooltips *
 ************/
.tooltip {
  color: white;
  padding: 4px;
  /* not working */
  border-radius: 5px;
  box-shadow: none;
  text-shadow: 0 1px black; }
  .tooltip.background {
    background-color: rgba(0, 0, 0, 0.8);
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.1); }

In case links aren't working in Javadoc popups, it may help to install libwebkitgtk like so:

sudo apt install libwebkitgtk-1.0-0