[Nifty] Tooltip texts?

Hello,

For a friendly user interface, I intend to add tooltips to my button :

When a user get its mouse hover a button, a panel appears near the button and let the user know what this button is for.



I,ve seen an effet named de.lessvoid.nifty.effects.impl.Hint that seems to do the trick.



Only problem : The targetPanel wich will store the hint need to be static and defined in advance ( if I have understood what this effect do )



So :

  • Have I correctly understood what it does ?
  • Is there another way to create tooltips ( like an attribute inside the control named hintText )



    This is just for confirmation. Having the effect de.lessvoid.nifty.effects.impl.Hint is already good enough. :slight_smile:

Yes, the build-in Hint effect just changes the text of the given targetElement which needs to be a part of the screen and it needs to be a text element.



There is no ready made hint effect available that does what you want. But it is possible to add this with a custom effect. I’ve done this before for another demo which just changes the position of the targetElement to align it somewhere near the element which the effect has been applied to.



Here is the Effect class:



[java]package de.lessvoid.nifty.examples.helloworld;



public class CustomHint implements EffectImpl {

private Nifty nifty;

private Element targetElement;

private String hintText;



public void activate(final Nifty niftyParam, final Element element, final EffectProperties parameter) {

this.nifty = niftyParam;



TargetElementResolver resolver = new TargetElementResolver(nifty.getCurrentScreen(), element);

targetElement = resolver.resolve(parameter.getProperty(“targetElement”));



String text = parameter.getProperty(“hintText”);

if (text != null) {

hintText = text;

}

}



public void execute(final Element element, final float normalizedTime, final Falloff falloff, final NiftyRenderEngine r) {

if (targetElement != null) {

if (hintText != null) {

targetElement.findElementByName(“content”).getRenderer(TextRenderer.class).setText(hintText);

}

targetElement.setConstraintX(new SizeValue(element.getX() + element.getWidth() - 50 + “px”));

targetElement.setConstraintY(new SizeValue(element.getY() + element.getHeight() - 50 + “px”));

targetElement.show();

nifty.getCurrentScreen().layoutLayers();

}

}



public void deactivate() {

if (targetElement != null) {

targetElement.hide();

}

}

}[/java]



Which you can use like this:



[xml]…

<registerEffect name=“custom-hint” class=“de.lessvoid.nifty.examples.helloworld.CustomHint”/>



<screen id=“start” controller=“de.lessvoid.nifty.examples.helloworld.HelloWorldStartScreen”>

<layer id=“layer” backgroundColor="#003f" childLayout=“center”>

<panel id=“panel” height=“25%” width=“35%” align=“center” valign=“center” backgroundColor="#f60f" childLayout=“center” visibleToMouse=“true”>

<effect>

<!-- apply the custom-hint effect whenever someone hovers this element, show the element with the id “hint-panel” and change the text to the given hintText -->

<onHover name=“custom-hint” targetElement=“hint-panel” hintText=“This is a hint” />

</effect>

</panel>

</layer>



<!-- another layer with the panel we’ll show as a hint on top of the normal layer -->

<layer id=“layer2” childLayout=“absolute”>

<panel id=“hint-panel” visible=“false” childLayout=“vertical” padding=“20px,50px,20px,50px” backgroundColor="#f00a">

<text id=“content” font=“verdana-small-regular.fnt” text=“empty” align=“center” valign=“center” />

</panel>

</layer>

</screen>

</nifty>[/xml]



This should get you started…

1 Like

Ok, thank you for the example!



After customControls, customEffetcs! The more I dwell into nifty, the more I like it! :slight_smile:

1 Like

To add to this very helpful answer. If you are using this programatically to build the UI it’s like this:

        new PanelBuilder(){{
                 onHoverEffect(new HoverEffectBuilder("custom-hint")
                .effectParameter("targetElement", "hint-panel")
                .effectParameter("hintText", "This is a hint")
         }}.build(nifty, currentScreen, parent);

Edit:
Although it also seems that tooltips aka hint text was added to core nifty: Effects · nifty-gui/nifty-gui Wiki · GitHub

2 Likes