Fixes #57

Directory.Build.props

@@ -6,7 +6,7 @@
     <PackageProjectUrl>https://github.com/rds1983/Myra</PackageProjectUrl>
     <RootNamespace>Myra</RootNamespace>
     <Description>UI Library for MonoGame, FNA and Stride</Description>
-    <VersionPrefix>1.5.2</VersionPrefix>
+    <VersionPrefix>1.5.3</VersionPrefix>
     <XNAssetsVersion>0.7.1</XNAssetsVersion>
     <FontStashSharpVersion>1.3.3</FontStashSharpVersion>
     <LangVersion>8.0</LangVersion>

samples/Myra.Samples.AllWidgets/AllWidgets.Generated.cs

@@ -1,4 +1,4 @@
-/* Generated by MyraPad at 10/31/2023 1:26:35 PM */
+/* Generated by MyraPad at 11/8/2023 1:41:26 PM */
 using Myra;
 using Myra.Graphics2D;
 using Myra.Graphics2D.TextureAtlases;
@@ -116,6 +116,7 @@ private void BuildUI()
 			_buttonSaveFile = new ImageTextButton();
 			_buttonSaveFile.Text = "Save File";
 			_buttonSaveFile.Padding = new Thickness(8, 0);
+			_buttonSaveFile.Tooltip = "Tooltip 1";
 			_buttonSaveFile.Id = "_buttonSaveFile";
 			Grid.SetColumn(_buttonSaveFile, 1);
 
@@ -130,6 +131,7 @@ private void BuildUI()
 			_buttonOpenFile = new ImageTextButton();
 			_buttonOpenFile.Text = "Open File";
 			_buttonOpenFile.Padding = new Thickness(8, 0);
+			_buttonOpenFile.Tooltip = "Tooltip 2";
 			_buttonOpenFile.Id = "_buttonOpenFile";
 			Grid.SetColumn(_buttonOpenFile, 1);
 			Grid.SetRow(_buttonOpenFile, 1);

samples/Myra.Samples.AllWidgets/allControls.xmmp

@@ -32,10 +32,10 @@
               <Proportion Type="Fill" />
             </Grid.ColumnsProportions>
             <Label Text="Button:" />
-            <ImageTextButton Text="Save File" Padding="8, 0" Id="_buttonSaveFile" Grid.Column="1" />
+            <ImageTextButton Text="Save File" Padding="8, 0" Tooltip="Tooltip 1" Id="_buttonSaveFile" Grid.Column="1" />
             <TextBox Id="_textSaveFile" Grid.Column="2" />
             <Label Text="Another Button:" Grid.Row="1" />
-            <ImageTextButton Text="Open File" Padding="8, 0" Id="_buttonOpenFile" Grid.Column="1" Grid.Row="1" />
+            <ImageTextButton Text="Open File" Padding="8, 0" Tooltip="Tooltip 2" Id="_buttonOpenFile" Grid.Column="1" Grid.Row="1" />
             <TextBox Id="_textOpenFile" Grid.Column="2" Grid.Row="1" />
             <Label Text="Blue Button:" Grid.Row="2" />
             <ImageTextButton Text="Choose Folder" StyleName="blue" Padding="8, 0" Id="_buttonChooseFolder" Grid.Column="1" Grid.Row="2" />

src/Myra/Graphics2D/UI/Desktop.cs

@@ -21,6 +21,12 @@
 
 namespace Myra.Graphics2D.UI
 {
+	public enum OverWidgetType
+	{
+		ContextMenu,
+		Tooltip
+	}
+
 	public partial class Desktop : ITransformable, IDisposable
 	{
 		private Rectangle _bounds;
@@ -67,7 +73,7 @@ public Widget Root
 					return;
 				}
 
-				HideContextMenu();
+				HideOverWidget();
 				Widgets.Clear();
 
 				if (value != null)
@@ -112,7 +118,9 @@ internal Rectangle InternalBounds
 
 		internal Rectangle LayoutBounds => new Rectangle(0, 0, InternalBounds.Width, InternalBounds.Height);
 
-		public Widget ContextMenu { get; private set; }
+		public Widget OverWidget { get; private set; }
+
+		public OverWidgetType OverWidgetType { get; private set; }
 
 		/// <summary>
 		/// Widget having keyboard focus
@@ -335,15 +343,15 @@ public Widget GetChild(int index)
 
 		private void InputOnTouchDown()
 		{
-			if (ContextMenu == null || ContextMenu.IsTouchInside)
+			if (OverWidget == null || OverWidget.IsTouchInside)
 			{
 				return;
 			}
 
 			var ev = ContextMenuClosing;
 			if (ev != null)
 			{
-				var args = new CancellableEventArgs<Widget>(ContextMenu);
+				var args = new CancellableEventArgs<Widget>(OverWidget);
 				ev(null, args);
 
 				if (args.Cancel)
@@ -352,23 +360,24 @@ private void InputOnTouchDown()
 				}
 			}
 
-			HideContextMenu();
+			HideOverWidget();
 		}
 
-		public void ShowContextMenu(Widget menu, Point position)
+		private void ShowOverWidget(Widget menu, OverWidgetType overWidgetType, Point position)
 		{
-			HideContextMenu();
+			HideOverWidget();
 
-			ContextMenu = menu;
-			if (ContextMenu == null)
+			OverWidget = menu;
+			if (OverWidget == null)
 			{
 				return;
 			}
 
-			ContextMenu.HorizontalAlignment = HorizontalAlignment.Left;
-			ContextMenu.VerticalAlignment = VerticalAlignment.Top;
+			OverWidgetType = overWidgetType;
+			OverWidget.HorizontalAlignment = HorizontalAlignment.Left;
+			OverWidget.VerticalAlignment = VerticalAlignment.Top;
 
-			var measure = ContextMenu.Measure(LayoutBounds.Size());
+			var measure = OverWidget.Measure(LayoutBounds.Size());
 
 			if (position.X + measure.X > LayoutBounds.Right)
 			{
@@ -380,32 +389,32 @@ public void ShowContextMenu(Widget menu, Point position)
 				position.Y = LayoutBounds.Bottom - measure.Y;
 			}
 
-			ContextMenu.Left = position.X;
-			ContextMenu.Top = position.Y;
+			OverWidget.Left = position.X;
+			OverWidget.Top = position.Y;
 
-			ContextMenu.Visible = true;
+			OverWidget.Visible = true;
 
-			Widgets.Add(ContextMenu);
+			Widgets.Add(OverWidget);
 
-			if (ContextMenu.AcceptsKeyboardFocus)
+			if (OverWidget.AcceptsKeyboardFocus)
 			{
 				_previousKeyboardFocus = FocusedKeyboardWidget;
-				FocusedKeyboardWidget = ContextMenu;
+				FocusedKeyboardWidget = OverWidget;
 			}
 		}
 
-		public void HideContextMenu()
+		public void HideOverWidget()
 		{
-			if (ContextMenu == null)
+			if (OverWidget == null)
 			{
 				return;
 			}
 
-			Widgets.Remove(ContextMenu);
-			ContextMenu.Visible = false;
+			Widgets.Remove(OverWidget);
+			OverWidget.Visible = false;
 
-			ContextMenuClosed.Invoke(ContextMenu);
-			ContextMenu = null;
+			ContextMenuClosed.Invoke(OverWidget);
+			OverWidget = null;
 
 			if (_previousKeyboardFocus != null)
 			{
@@ -414,6 +423,25 @@ public void HideContextMenu()
 			}
 		}
 
+		public void ShowContextMenu(Widget menu, Point position) =>
+			ShowOverWidget(menu, OverWidgetType.ContextMenu, position);
+
+
+		public void ShowTooltip(Widget widget, string text, Point position)
+		{
+			var tooltip = new Label(null)
+			{
+				Text = text,
+				Tag = widget
+			};
+
+			tooltip.ApplyLabelStyle(Stylesheet.Current.TooltipStyle);
+
+			ShowOverWidget(tooltip, OverWidgetType.Tooltip, position);
+		}
+
+		public void HideContextMenu() => HideOverWidget();
+
 		private void WidgetsOnCollectionChanged(object sender, NotifyCollectionChangedEventArgs args)
 		{
 			if (args.Action == NotifyCollectionChangedAction.Add)
@@ -607,7 +635,7 @@ public void UpdateLayout()
 
 		internal void ProcessWidgets(Func<Widget, bool> operation)
 		{
-			foreach(var w in ChildrenCopy)
+			foreach (var w in ChildrenCopy)
 			{
 				var result = w.ProcessWidgets(operation);
 				if (!result)
@@ -781,9 +809,9 @@ public void OnKeyDown(Keys key)
 				}
 			}
 
-			if (key == Keys.Escape && ContextMenu != null)
+			if (key == Keys.Escape && OverWidget != null && OverWidgetType == OverWidgetType.ContextMenu)
 			{
-				HideContextMenu();
+				HideOverWidget();
 			}
 		}
 

src/Myra/Graphics2D/UI/Selectors/ComboBox.cs

@@ -115,9 +115,9 @@ public ComboBox(string styleName = Stylesheet.DefaultStyleName) :
 
 		internal void HideDropdown()
 		{
-			if (Desktop != null && Desktop.ContextMenu == _listBox)
+			if (Desktop != null && Desktop.OverWidget == _listBox)
 			{
-				Desktop.HideContextMenu();
+				Desktop.HideOverWidget();
 			}
 		}
 

src/Myra/Graphics2D/UI/Selectors/Menu.cs

@@ -531,7 +531,7 @@ public void Close()
 		{
 			if (Desktop != null)
 			{
-				Desktop.HideContextMenu();
+				Desktop.HideOverWidget();
 			}
 			HoverIndex = SelectedIndex = null;
 		}
@@ -578,7 +578,7 @@ private void OnHoverIndexChanged(object sender, EventArgs eventArgs)
 				return;
 			}
 
-			if (Desktop.ContextMenu != this && menuItem.CanOpen && OpenMenuItem != menuItem)
+			if (Desktop.OverWidget != this && menuItem.CanOpen && OpenMenuItem != menuItem)
 			{
 				SelectedIndex = HoverIndex;
 			}
@@ -603,9 +603,9 @@ private void OnSelectedIndexChanged(object sender, EventArgs e)
 				{
 					_internalSetSelectedIndex = true;
 
-					if (Desktop.ContextMenu != this)
+					if (Desktop.OverWidget != this)
 					{
-						Desktop.HideContextMenu();
+						Desktop.HideOverWidget();
 					}
 				}
 				finally

src/Myra/Graphics2D/UI/Styles/Stylesheet.cs

@@ -48,6 +48,7 @@ public static Stylesheet Current
 		}
 
 		private readonly Dictionary<string, LabelStyle> _labelStyles = new Dictionary<string, LabelStyle>();
+		private readonly Dictionary<string, LabelStyle> _tooltipStyles = new Dictionary<string, LabelStyle>();
 		private readonly Dictionary<string, TextBoxStyle> _textBoxStyles = new Dictionary<string, TextBoxStyle>();
 		private readonly Dictionary<string, ButtonStyle> _buttonStyles = new Dictionary<string, ButtonStyle>();
 		private readonly Dictionary<string, ImageTextButtonStyle> _checkBoxStyles = new Dictionary<string, ImageTextButtonStyle>();
@@ -97,6 +98,19 @@ public LabelStyle LabelStyle
 			}
 		}
 
+		[XmlIgnore]
+		public LabelStyle TooltipStyle
+		{
+			get
+			{
+				return GetDefaultStyle(_tooltipStyles);
+			}
+			set
+			{
+				SetDefaultStyle(_tooltipStyles, value);
+			}
+		}
+
 		[XmlIgnore]
 		public TextBoxStyle TextBoxStyle
 		{
@@ -378,6 +392,14 @@ public Dictionary<string, LabelStyle> LabelStyles
 			}
 		}
 
+		public Dictionary<string, LabelStyle> TooltipStyles
+		{
+			get
+			{
+				return _tooltipStyles;
+			}
+		}
+
 		public Dictionary<string, TextBoxStyle> TextBoxStyles
 		{
 			get

src/Myra/Graphics2D/UI/Widget.Input.cs

@@ -25,6 +25,7 @@ partial class Widget
 		public const int DoubleClickRadius = 2;
 
 		private DateTime? _lastTouchDown;
+		private DateTime? _lastMouseMovement;
 		private Point _lastLocalTouchPosition;
 		private Point? _localMousePosition;
 		private Point? _localTouchPosition;
@@ -303,14 +304,23 @@ internal void ProcessInputEvents()
 					switch (inputEvent)
 					{
 						case InputEventType.MouseLeft:
+							if (Desktop != null && Desktop.OverWidget != null && Desktop.OverWidget.Tag == this)
+							{
+								// Tooltip for this widget is shown
+								Desktop.HideOverWidget();
+							}
+
+							_lastMouseMovement = null;
 							OnMouseLeft();
 							MouseLeft.Invoke(this);
 							break;
 						case InputEventType.MouseEntered:
+							_lastMouseMovement = DateTime.Now;
 							OnMouseEntered();
 							MouseEntered.Invoke(this);
 							break;
 						case InputEventType.MouseMoved:
+							_lastMouseMovement = DateTime.Now;
 							OnMouseMoved();
 							MouseMoved.Invoke(this);
 							break;

src/Myra/Graphics2D/UI/Widget.cs

@@ -471,6 +471,10 @@ public virtual MouseCursorType? MouseCursor
 			}
 		}
 
+		[Category("Behavior")]
+		[DefaultValue(null)]
+		public string Tooltip { get; set; }
+
 
 		[Category("Transform")]
 		[DefaultValue("1, 1")]
@@ -852,6 +856,14 @@ public void Render(RenderContext context)
 				return;
 			}
 
+			if (!string.IsNullOrEmpty(Tooltip) && Desktop != null && 
+				(Desktop.OverWidget == null || Desktop.OverWidget.Tag != this) && 
+				_lastMouseMovement != null && (DateTime.Now - _lastMouseMovement.Value).TotalMilliseconds > MyraEnvironment.TooltipDelayInMs)
+			{
+				Desktop.ShowTooltip(this, Tooltip, Desktop.MousePosition + MyraEnvironment.TooltipOffset);
+			}
+
+
 			UpdateArrange();
 
 			var oldTransform = context.Transform;

src/Myra/MyraEnvironment.cs

@@ -224,6 +224,8 @@ public static AssetManager DefaultAssetManager
 		public static bool DrawMouseHoveredWidgetFrame { get; set; }
 		public static bool DrawTextGlyphsFrames { get; set; }
 		public static bool DisableClipping { get; set; }
+		public static int TooltipDelayInMs { get; set; } = 500;
+		public static Point TooltipOffset { get; set; } = new Point(0, 20);
 
 		/// <summary>
 		/// Makes the text rendering more smooth(especially when scaling) for the cost of sacrificing some performance 

src/Myra/Resources/default_ui_skin.xmms

@@ -2,10 +2,14 @@
 <Stylesheet TextureRegionAtlas="default_ui_skin.xmat">
   <Fonts UsedSpace="0, 0, 1024, 160">
     <Font Id="default-font" File="Inter-Regular.ttf" Size="20"/>
+    <Font Id="tooltip-font" File="Inter-Regular.ttf" Size="16"/>
   </Fonts>
   <LabelStyles>
     <LabelStyle Font="default-font" TextColor="white" DisabledTextColor="gray" />
   </LabelStyles>
+  <TooltipStyles>
+    <LabelStyle Background="default-pane" Padding="5" Font="tooltip-font" TextColor="white" />
+  </TooltipStyles>
   <TextBoxStyles>
     <TextBoxStyle Background="textfield" TextColor="white" DisabledTextColor="gray" Font="default-font" Cursor="cursor" Selection="selection" />
   </TextBoxStyles>

src/MyraPad/Studio.cs

@@ -974,9 +974,9 @@ private void UpdatePositions()
 
 		private void HandleAutoComplete()
 		{
-			if (_desktop.ContextMenu == _autoCompleteMenu)
+			if (_desktop.OverWidget == _autoCompleteMenu)
 			{
-				_desktop.HideContextMenu();
+				_desktop.HideOverWidget();
 			}
 
 			if (_currentTagStart == null || _currentTagEnd != null || string.IsNullOrEmpty(_parentTag))