Problem
In Part 2, I've showed you how to display tooltip with markup text on a GtkButton.
In this Part 3, instead of displaying text, we will display an image (using GtkImage with any standard graphics format such as .gif, .jpg, .png, etc.) as shown below:
Key method used: GtkTooltip::set_custom().
Solution
- The setup of tooltip is exactly the same as that of Part 1.
- The only difference is that instead of using
GtkTooltip::set_text()
, we useGtkTooltip::set_custom()
to display the image.
Important Note: This only works for PHP-GTK v2.0 (or PHP-GTK2 compliled with gtk+ v2.12 and above. If you are using an older version, for linux, you may follow the step-by-step instructions to recompile php-gtk2 with gtk+ v2.12. For windows, please refer to How to install php gtk2 on windows?
Sample Code
The following image files are required by the sample code below. Please save a copy of the image files and put them in the same directory where you store the sample code.
![]() | ball_blue48.png |
![]() | ball_green48.png |
![]() | ball_yellow48.png |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 41 45 46 47 48 49 50 51 | <?php $window = new GtkWindow(); $window->set_title($argv[0]); $window->connect_simple('destroy', array( 'Gtk', 'main_quit')); $window->set_size_request(400,150); $window->add($vbox = new GtkVBox()); // display title $title = new GtkLabel("Display tooltip on GtkButton using GtkTooltip\n". " Part 3 - display tooltip with image!"); $title->modify_font(new PangoFontDescription("Times New Roman Italic 10")); $title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff")); $title->set_size_request(-1, 60); $vbox->pack_start($title, 0, 0); $vbox->pack_start($hbox=new GtkHBox(), 0, 0); create_button($hbox, 'Blue', 'ball_blue48.png'); create_button($hbox, 'Green', 'ball_green48.png'); create_button($hbox, 'Yellow', 'ball_yellow48.png'); $window->show_all(); Gtk::main(); function create_button($hbox, $button_label, $img) { $button = new GtkButton($button_label); $button->set_size_request(80, 32); $hbox->pack_start($button, 1, 0); $button->connect('clicked', "on_button", $button_label); $button->set_property('has-tooltip', true); // note 1 $button->connect('query-tooltip', 'on_tooltip', $img); // note 2 } function on_button($button, $button_label) { echo "You have clicked: $button_label!\n"; } function on_tooltip($widget, $x, $y, $keyboard_mode, $tooltip, $img_file) { $label = $widget->get_label(); global $images; $img = GtkImage::new_from_file($img_file); // note 3 $tooltip->set_custom($img); // note 4 return true; } ?> |
Output
As shown above.
Explanation
- Enable tooltip on the widget.
- Connect to the signal
'query-tooltip'
. - Load the image file.
- Display the image in the tooltip.
Related Links
- How to display tooltips in GtkTreeView - Part 4?
- How to display tooltip on buttons using GtkTooltip - Part 1 - plain text?
- How to display tooltip on buttons using GtkTooltip - Part 2 - markup text?
- How to display tooltip on buttons using GtkTooltip - Part 4 - tooltip with markup text and image?
- How to display tooltip on buttons using GtkTooltip - Part 5 - tooltip with image and label below image?
- How to display tooltip on buttons using GtkTooltip - Part 6 - tooltip with GtkTable?
Read more...