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:

Eclipse with an unusable tooltip

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?

16 Answers 16

up vote 147 down vote
+50

Install and open gnome-color-chooser Install gnome-color-chooser.

Go to SpecificTooltips and put black foreground over pale yellow background.

  • 3
    restart eclipse for changes to take effect – cmcginty Feb 23 '12 at 0:14
  • 8
    No need to restart for me. – ubuntudroid Apr 3 '12 at 14:21
  • 1
    This works for 12.04 LTS with Eclipse 4.2 too! – David Edwards Jul 10 '12 at 14:09
  • 2
    Unfortunately, this did not work for me (Ubuntu 12.04 64-bit and Eclipse Juno). Both, the accepted answer and the one below from DJo, worked for me. – Luis Aug 5 '12 at 23:24
  • 8
    +1, but note that this affects ALL of the system tooltips. If you want a solution just for Eclipse, follow @bain's answer. – ysap Aug 29 '12 at 22:56
up vote 135 down vote accepted

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:

Eclipse with customized theme

  • 2
    any way to do this via the UI in ubuntu 11? – frankster Oct 26 '11 at 20:44
  • 1
    Worked just as expected in Xubuntu 12.10 as well. – davidcesarino Oct 30 '12 at 17:31
  • 1
    Is there a way to change this for your user only (ie, not require [gk]sudo? I'm sure that, as most gnome settings, there is a per-user config file/dir – MestreLion Mar 27 '13 at 1:22
  • 2
    @MestreLion: User themes are picked from ~/.themes/. You will need to copy the Ambiance folder into this. – ignite Mar 31 '13 at 13:33
  • 1
    I had to edit gtk-3.0/gtk-main.css as well, but this worked on 14.04. Also works when using the "Radiance" theme, just need to edit the same files in the Radiance folder. – jmiserez Apr 26 '16 at 14:25

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

  • 1
    Here is the setting to customize the background color of the autocompletion dialog in Eclipse: stackoverflow.com/a/8063723/356895. – JJD Jun 23 '12 at 10:12
  • Do you know how I can include the environment variable in the Ubuntu application menu so Eclipse also loads the settings when not started via the shell? – JJD Jun 23 '12 at 10:34
  • 3
    I compiled an article which summarizes the topic. – JJD Jul 28 '12 at 15:19
  • 2
    fantastic approach @bain !!! :)Does not require sudo, affects your user only, and does not need to copy the whole theme to your ~. Nice :) – MestreLion Apr 2 '13 at 5:00
  • 1
    @JJD: I'm usually against "thank you"-only comments, but your article is awesome. I noticed it uses the same approach as this answer. Since I already use a custom shell script to launch Eclipse from both command line and .desktop file, adding the GTK2_RC_FILES=... env is easy. Thanks :) – MestreLion Apr 2 '13 at 5:23

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"

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"

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.

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"
  • It was actually enough to follow jgreen's answer and change only one line in one file. – Teemu Leisti Sep 25 '12 at 13:29

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.

  • org->gnome->desktop->interface->gtk-color-scheme – Alessandro D'lncal Aug 19 at 22:14
  • Like the new Reference: GtkSettings:gtk-color-scheme has been deprecated since version 3.8 and should not be used in newly-written code. Color scheme support was dropped and is no longer supported. You can still set this property, but it will be ignored. – Alessandro D'lncal Aug 19 at 22:58
  • In Ubuntu 18.04 is not anymore valid. I tried to change it by dconf but with no results. In Ubuntu 18.04 you have to change the gtk-3.0 folder in .config putting your gtk.css file in order to take effect. You have to modify even the seettings.ini in that folder. – Alessandro D'lncal Aug 19 at 23:19

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

Black-on-Yellow tooltip

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

  1. ~/.config/gtk-3.0/gtk.css

    /* tooltips */
    @define-color tooltip_bg_color #ffffaf;
    @define-color tooltip_fg_color #000000;
    
  2. ~/.config/gtk-3.0/settings.ini

    [Settings]
    gtk-color-scheme = "tooltip_bg_color:#ffffaf\ntooltip_fg_color:#000000"
    
  3. ~/.gtkrc-2.0

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

The 3rd file were created by gnome-color-chooser. Use it only if you have 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).

  • In Ubuntu 18.04 the third and fourth part are not useful because it uses Gtk-3.0. First and second one solve the problem. – Alessandro D'lncal Aug 20 at 7:54

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.

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.

  • 2
    On 11.10, this does not work. I can change the theme in Appearance, but there is no means to customize the theme. – daniel kullmann Nov 21 '11 at 11:10
  • I don't have 11.10 installed but I would find it weird if they have removed a way to customize a theme. Perhaps they have renamed the button and/or placed it in a different place/tab? – Sergiy Belozorov Nov 21 '11 at 16:19
  • Sergiy, many of us have searched but it looks like it's not there. We're hoping it will reappear in 12.04. – user25656 Dec 1 '11 at 11:35
  • 1
    Are you guys really surprised about removed customization options in Gnome3/Unity? – MestreLion Aug 28 '13 at 14:34
  • Not anymore... after using 12.04 for a while, our admins are considering moving onto Fedora or some other RHEL-like distribution. Ubuntu has become a multimedia platform, which works well for home users, but not for the IT professionals. – Sergiy Belozorov Aug 28 '13 at 16:20

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!!)

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

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.

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.

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

protected by Community Aug 18 '16 at 12:02

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.