In this article we will discover the tooltips applicable to certain classes of objects. Tooltips are useful for displaying information in relevant and targeted places in a network. They are often used as markers or annotations during the construction of large projects.

Tooltips are displayed in 3D mode and can even be formatted with bold, italic and colored text!

Summary

Introduction

To start, ‘what is a tooltip?‘. A tooltip is a bubble in which text is displayed with one or more lines. Some examples in pictures below:

A tree mapple
Default tooltip
Bushes
Tooltip with a blue background and white text
Water tanks
Tooltip with the default background and green text
Custom tooltip
Custom tooltip

Introducing tooltips

To display the Tooltips window, click on the Tooltip… button in the object properties. Let us use a contact as an example :

After clicking on this button, the following window will appear:

This window is made up of a large input area, two buttons to choose a foreground and background color, a check box to display the bubble or not and an Apply button to validate everything.

The default colors are black for the text and white for the background. You can change these colors at will using the two dedicated buttons.

In the second example at the beginning of this article, a blue background and white colored text was chosen to display the tooltip.

We are now going to improve the display of tooltips by customizing the appearance for the font, adding several colors in the same tooltip and setting the alignment.

Customizing tooltips

The customization of the tooltips goes through the use of ‘tags’, a bit like the html language.

First of all, what is a beacon? to put it simply, a tag always begins with the sign < and ends with >. Between these two signs, one or more letters can be used as a code to modify the formatting of the text or its color. Each code corresponds to a specific command listed below:

  1. ‹j› = Left alignment,
  2. ‹r› = Right alignment,
  3. ‹c› = Centered,
  4. ‹br› = New line (br = break in English),
  5. ‹fgrgb=0,0,0› = Text color,
  6. ‹bgrgb=0,0,0› = Background color (only at the location of the text and not in the entire bubble),
  7. ‹b›……..‹/b› = Bold characters (b = bold in English),
  8. ‹i›……..‹/i› = Italic characters .

We’ll just start with the first tag to align the text to the left. For example we could write:

And the result in 3D :

Now the same text but this time centered :

And the result in 3D :

We will keep the same text and introduce the line break with the ‹br› tag, br = break in English.

And the result in 3D :

A few small details: different beacons can be used simultaneously. In this example, a first ‹br› tag was placed between the 1st and 2nd sentence of the first paragraph. Then two more ‹br› tags placed after the first paragraph cause a line break to display the 2nd paragraph.

We are going to keep the same text and introduce the concept of colors with the two tags ‹fgrgb=0,0,0› and ‹bgrgb=0,0,0›.

The abbreviation fgrgb to the left of the equal sign for the tag ‹fgrgb=0,0,0› means in English foregroundredgreenblue. We can reprisent redgreenblue by RGB the three primary colors. This tag will therefore modify the color of the text in the foreground.

The abbreviation bgrgb to the left of the equal sign for the tag ‹bgrgb=0,0,0› means in English backgroundredgreenblue. We can reprisent redgreenblue by RGB the three primary colors red – green – blue. This tag will therefore modify the background color of the text.

The three digits after the equal sign express the decimal value for each of the three colors. Valid values ​​are between 0 and 255. Mixing the three results in different colors. For example :

  • 0,0,0 = black,
  • 255,255,255 = white,
  • 255.0.0 = red,
  • 255.255.0 = yellow,
  • 255,76,185 = pink,
  • etc…

Here is the address of an excellent site where you can define a custom color by dragging the 3 sliders of the primary colors in order to obtain the corresponding decimal values ​​to then integrate into the fgrbg or bgrgb properties.

We’ll take our sentence example and apply two different colors to the paragraph background:

And the result in 3D :

Repeated use of the bgrgb tag results in different colors being applied to the text background and not the entire bubble. We will see later how to apply a global background color.

The same principle also applies for the foreground color:

And the result in 3D :

Repeated use of the fgrgb tag results in different colors being applied to the text color.

Here, we can ask ourselves the question: why define a color for the text when the Foreground Color button is there for that?

Answer: well not quite! the fgrgb tag used for the text color will always take precedence if you use it over the Foreground Color button, as you have the option of applying multiple colors to the text in a single bubble.

Conversely, the background color defined via the Background color button affects the entire bubble. But if the bgrgb tag is used together, the text background color will be different from the bubble background color.

Example image below:

A few small observations to note in this example. The background color was chosen via the Background Color button at the bottom of the window. This color does not apply to the background of the sentences because the color of these has been defined by the bgrgb tag. The third sentence inherits the background color of the 2nd sentence because no new bgrgb tag was used for this third sentence. If no bgrgb tag had been added, the sentence background would also be green.

What is true for the background is also true for the foreground. Despite the turquoise color selected via the Foreground Color button, the text of the three sentences has its own color because the fgrgb tag was used. The turquoise color is simply ignored.

We now have to study the last two tags used to bold and/or italicize the text. So far we had only one ‘opening’ tag. Now we have an ‘opening’ tag at the beginning and a ‘closing’ tag at the end with a /.

Any text written between the two ‹b›……..‹/b› tags will be bolded. Example image below:

In this example, the two sentences are included between the two tags ‹b›……..‹/b›. The color of the text corresponds to the color chosen via the Foreground color button. Indeed, the text does not contain any fgrgb tag.

The same principle applies if you want to display text in italics, just place it between the two tags ‹i›……..‹/i› as in the example below:

In this last example, only the second sentence is in italics because it is placed between the two tags ‹i›……..‹/i›.

Note : Different background colors can be used depending on the object types. For example, for real estate/ structures : blue, signals : green, switches : yellow, etc… This method, used in conjunction with the display of certain useful properties in the text, is very practical for visualizing object information such as turnout IDs during the construction of a layout or simply a marker, a coordinate…

Extended possibilities

Individually for each tooltip, you have the choice to display it by checking the box Show the tooltip. Otherwise, uncheck the box if you don’t want it to appear.

You can also use the menu command View → Show Tooltips to show or hide tooltips. This command acts on all the tooltips contained in a project.

And if all that wasn’t enough, 6 Lua features bring even more interactivity by adding the ability to dynamically change tooltips while your network is live!

These 6 functions concern signaling, switches, structures and landscape elements. In the rest of this article, we will limit ourselves to the simple description of these functions. They will be the subject of another detailed article for the implementation in a network. For now, keep in mind that a Lua function can only be called from a contact point.

For signaling

EEPShowInfoSignal()

Shows or hides the tooltip of the signal specified by its ID number or identification number. First, we need to retrieve the ID number of the signal (framed in red) which is found in the header of the properties window of the signal in question. The image below shows the result:

Once the ID number has been retrieved, all you have to do is enter it in the first parameter of the function. The second parameter takes the value true or false respectively to show or hide the tooltip.

Here is the code for this function to display the tooltip of signal #1:

				
					-- Affiche l'info-bulle du signal n° 1
EEPShowInfoSignal(1, true)
				
			

And the code to hide it:

				
					-- Masque l'info-bulle du signal N° 1
EEPShowInfoSignal(1, false)
				
			

In computer science, the words true and false are constants directly integrated into the programming languages. 

You will find at the end of this article a small project to download with two lua functions to hide or show the tooltip of a signal.

EEPChangeInfoSignal()

Assigns new text in the tooltip of a signal specified by its ID number. First, we need to retrieve the ID number of the signal. The previous function showed us how to do this. Then once the ID number has been retrieved, the second parameter is simply the new text to display in the tooltip.

Here is the code for this function to assign new text in the tooltip of signal #1:

				
					-- Assigns a new text in the tooltip
EEPChangeInfoSignal(1, "I am the new text")
				
			

For turnouts/switches

EEPShowInfoSwitch()

Shows or hides the tooltip of a turnout specified by its ID number. First, we need to retrieve the ID number of the turnout which is in the properties window of the turnout in question. The image below shows the result:

The ID of a turnout is not in the header of the track properties window but in the Turnout switch display frame (circled in blue in the picture). The ID circled in red and hatched corresponds to that of the track number!

Once the ID number has been retrieved, all you have to do is write it in the first parameter of the function. The second parameter takes the value true or false respectively to show or hide the tooltip.

Here is the code for this function to display the tooltip for turnout #2:

				
					-- Displays the tooltip for switch #2
EEPShowInfoSwitch(2, true)
				
			

And the code to hide it:

				
					-- Hides the tooltip of switch #2
EEPShowInfoSwitch(2, false)
				
			

EEPChangeInfoSwitch()

Assigns new text in the tooltip of a turnout specified by its ID number. Once the ID number has been retrieved, the second parameter is simply the new text to display in the tooltip.

Here is the code for this function to assign new text in the tooltip of turnout #2:

For structures or landscape

				
					-- Assigns a new text in the tooltip
EEPChangeInfoSwitch(2, "I am the new text")
				
			

EEPShowInfoStructure()

Shows or hides the tooltip for a landscape item or building structure specified by the lua name of the object. First, we need to retrieve this name which is in the properties window of the object in question. The image below shows us where to look for it:

The lua name of an object always begins with the sign # followed by a number. After the number is the model name. Of course, EEP does not require you to enter the full name! Only the # sign and the number are necessary.

Once the lua name has been retrieved, all you have to do is write it in the first parameter of the function. The second parameter takes the value true or false respectively to show or hide the tooltip.

Here is the code for this function to display the tooltip of the panel (in this example) with the name lua #9:

				
					-- Displays the tooltip of panel #9
EEPShowInfoStructure("#9", true)
				
			

And the code to hide it:

				
					-- Hides the tooltip of panel #9
EEPShowInfoStructure("#9", false)
				
			

EEPChangeInfoStructure()

Assigns new text in the tooltip of a landscape item or building structure specified by the lua name of the object. Once the lua name has been retrieved, the second parameter is simply the new text to display in the tooltip.

Here is the code for this function to assign new text in the tooltip of panel #9:

				
					-- Assigns a new text in the tooltip
EEPChangeInfoStructure("#9", "I am the new text")
				
			

Conclusion

Using tooltips is a welcome help when building large networks. You can also use them in small projects to share for educational purposes because it provides guidance for other users.

However, be careful not to overdo it, as this could affect readability if you have a lot of objects concentrated in a limited area.

Below is the project file with the examples from the article and two lua functions to hide and show the tooltip of a signal.

This article is now complete. If you have any questions or suggestions, please give us your feedback in the leave a reply input box below.

Thank you for your helpful comments. Have fun reading an other article. 

eep-world.com team

This article was translated by Pierre for the English side of the EEP-World from the article written by Domi for the French side of the EEP-World.

Leave a Reply