219

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?

0

16 Answers 16

149
+50

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

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

8
  • 3
    restart eclipse for changes to take effect
    – cmcginty
    Feb 23, 2012 at 0:14
  • 8
    No need to restart for me. Apr 3, 2012 at 14:21
  • 1
    This works for 12.04 LTS with Eclipse 4.2 too! Jul 10, 2012 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, 2012 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, 2012 at 22:56
137

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

12
  • 2
    any way to do this via the UI in ubuntu 11?
    – frankster
    Oct 26, 2011 at 20:44
  • 1
    Worked just as expected in Xubuntu 12.10 as well. Oct 30, 2012 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, 2013 at 1:22
  • 2
    @MestreLion: User themes are picked from ~/.themes/. You will need to copy the Ambiance folder into this.
    – ignite
    Mar 31, 2013 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, 2016 at 14:25
30

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

8
  • 1
    Here is the setting to customize the background color of the autocompletion dialog in Eclipse: stackoverflow.com/a/8063723/356895.
    – JJD
    Jun 23, 2012 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, 2012 at 10:34
  • 3
    I compiled an article which summarizes the topic.
    – JJD
    Jul 28, 2012 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, 2013 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, 2013 at 5:23
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"
0
9

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"
8

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.

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

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.

3
  • org->gnome->desktop->interface->gtk-color-scheme Aug 19, 2018 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. Aug 19, 2018 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. Aug 19, 2018 at 23:19
4

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

1
  • 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. Aug 20, 2018 at 7:54
3

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.

0
1

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

0

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.

5
  • 2
    On 11.10, this does not work. I can change the theme in Appearance, but there is no means to customize the theme. Nov 21, 2011 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? Nov 21, 2011 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, 2011 at 11:35
  • 1
    Are you guys really surprised about removed customization options in Gnome3/Unity?
    – MestreLion
    Aug 28, 2013 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. Aug 28, 2013 at 16:20
0

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

0

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.

0

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.

0

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .