You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: MAUI/DataGrid/ToolTip.md
+27-4Lines changed: 27 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ To show tooltips:
16
16
-**On Windows/Mac**: Hover the mouse cursor over any cell in the grid
17
17
-**On Android/iOS**: Long press on any cell in the grid
18
18
19
-
## Record cell tooltip
19
+
## Show tooltip in a header and record cell
20
20
21
21
To enable tooltip for datagrid, set the `SfDataGrid.ShowToolTip` property to `true`. This will display tooltip containing cell content when users interact with the cells.
22
22
@@ -72,7 +72,16 @@ The `DataGridColumn.ShowToolTip` property takes higher priority than the `SfData
72
72
73
73
## ToolTip Customization
74
74
75
-
You can change the appearance of the ToolTip by customizing the style with TargetType as DataGridToolTipView.
75
+
You can customize the appearance of the tooltip in the MAUI SfDataGrid using either implicit styles or default style properties. Below are two approaches to achieve this:
76
+
77
+
### Apply Implicit Style
78
+
79
+
You can define an implicit style in the ContentPage.Resources section by targeting the DataGridToolTipView. This allows you to customize various visual aspects of the tooltip such as Background, TextColor, FontAttributes, FontFamily, and FontSize.
80
+
81
+
To change the tooltip's border appearance, use the Stroke and StrokeThickness properties within the implicit style.
82
+
83
+
*`Stroke`: Sets the border color of the tooltip.
84
+
*`StrokeThickness`: Defines the thickness of the tooltip border.
76
85
77
86
{% tabs %}
78
87
{% highlight XAML %}
@@ -88,7 +97,21 @@ You can change the appearance of the ToolTip by customizing the style with Targe
88
97
{% endtabs %}
89
98
<imgalt="Customizing ToolTip Style in MAUI DataGrid"src="Images\tooltip\maui-datagrid-tooltip-style.png"width="404" />
90
99
91
-
### Customize the ToolTip using ToolTipTemplate
100
+
### Apply Default Style
101
+
102
+
You can apply basic tooltip styling using the DefaultStyle property of SfDataGrid. This method supports only background and text color customization.
You can customize the appearance and content of tooltips by setting the `SfDataGrid.ToolTipTemplate` property.
94
117
@@ -110,7 +133,7 @@ You can customize the appearance and content of tooltips by setting the `SfDataG
110
133
111
134
<imgalt="Customizing ToolTip using ToolTipTemplate in MAUI DataGrid"src="Images\tooltip\maui-datagrid-tooltip-template.png"width="404" />
112
135
113
-
### Customize the ToolTip with ToolTipTemplateSelector
136
+
### Customizing the ToolTip with DataTemplateSelector
114
137
115
138
You can load different tooltip templates conditionally based on cell data by using a DataTemplateSelector with the `SfDataGrid.ToolTipTemplate` property.
0 commit comments