Skip to content
Robert J. Lemmens edited this page Jan 5, 2022 · 2 revisions

Tooltips

Tooltips can be used to display pop-up information. There are two ways to create tooltips:

  • nk_tooltip_begin(...) with nk_tooltip_end(...)
  • Or nk_tooltip(...).

The easiest way to use one is with nk_tooltip(...) like so:

nk_tooltip(ctx, "This is a tooltip");

Examples

Here's an example of a window with a tooltip that shows up when hovering text:

static void scratchpad(struct nk_context *ctx, struct media *media) {
  nk_style_set_font(ctx, &media->font_20->handle);
  nk_begin(ctx, "Nuklear Tooltips example", nk_rect(50,50, 255, 340), NK_WINDOW_TITLE | NK_WINDOW_MOVABLE);
  const char my_text[] = "This is a very long string that doesnt fit!";
  nk_layout_row_dynamic(ctx, 20, 1);
  if (nk_widget_is_hovered(ctx)) {                         /// If the widget below here is hovered, do something...
    nk_tooltip(ctx, my_text);                              /// ... Display our tooltip!
  }
  nk_text(ctx, my_text, strlen(my_text), NK_TEXT_LEFT);   /// Our text, that doesnt quite seem to fit our window.
  nk_end(ctx);
}

Tooltip

With nk_tooltip_begin(...) and nk_tooltip_end(...) you can create more complex tooltips:

static void scratchpad(struct nk_context *ctx, struct media *media) {
  nk_style_set_font(ctx, &media->font_20->handle);
  nk_begin(ctx, "Nuklear Tooltips example", nk_rect(50,50, 255, 340), NK_WINDOW_TITLE | NK_WINDOW_MOVABLE);
  const char my_text[] = "Hover me!";
  nk_layout_row_dynamic(ctx, 20, 1);
  if (nk_widget_is_hovered(ctx)) {                                       /// If the widget below here is hovered, do something...

    nk_tooltip_begin(ctx, 400);                                          /// Begin tooltip
      nk_layout_row_dynamic(ctx, 400, 1);                                /// We can add whatever we like here...
      nk_image(ctx, media->cloud);                                       /// ...Like images!
      nk_layout_row_dynamic(ctx, 40, 1);
      nk_button_label(ctx, "Click me if you can! Haha");                 /// ... or buttons, try clicking it ;)
    nk_tooltip_end(ctx);

  }
  nk_text(ctx, my_text, strlen(my_text), NK_TEXT_LEFT);
  nk_end(ctx);
}

Tooltip 2