Skip to content

Commit 99b00e9

Browse files
Addressed review corrections
1 parent c13583a commit 99b00e9

File tree

6 files changed

+27
-4
lines changed

6 files changed

+27
-4
lines changed
-23.4 KB
Loading
-39.3 KB
Loading
-61.9 KB
Loading
-61.7 KB
Loading
-67.5 KB
Loading

MAUI/DataGrid/ToolTip.md

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ To show tooltips:
1616
- **On Windows/Mac**: Hover the mouse cursor over any cell in the grid
1717
- **On Android/iOS**: Long press on any cell in the grid
1818

19-
## Record cell tooltip
19+
## Show tooltip in a header and record cell
2020

2121
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.
2222

@@ -72,7 +72,16 @@ The `DataGridColumn.ShowToolTip` property takes higher priority than the `SfData
7272

7373
## ToolTip Customization
7474

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.
7685

7786
{% tabs %}
7887
{% highlight XAML %}
@@ -88,7 +97,21 @@ You can change the appearance of the ToolTip by customizing the style with Targe
8897
{% endtabs %}
8998
<img alt="Customizing ToolTip Style in MAUI DataGrid" src="Images\tooltip\maui-datagrid-tooltip-style.png" width="404" />
9099

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.
103+
104+
{% tabs %}
105+
{% highlight XAML %}
106+
<syncfusion:SfDataGrid.DefaultStyle>
107+
<syncfusion:DataGridStyle ToolTipBackground="Red" ToolTipTextColor="White" />
108+
</syncfusion:SfDataGrid.DefaultStyle>
109+
{% endhighlight %}
110+
{% endtabs %}
111+
112+
## Load views to the Tooltip
113+
114+
### Customizing the ToolTip using DataTemplate
92115

93116
You can customize the appearance and content of tooltips by setting the `SfDataGrid.ToolTipTemplate` property.
94117

@@ -110,7 +133,7 @@ You can customize the appearance and content of tooltips by setting the `SfDataG
110133

111134
<img alt="Customizing ToolTip using ToolTipTemplate in MAUI DataGrid" src="Images\tooltip\maui-datagrid-tooltip-template.png" width="404" />
112135

113-
### Customize the ToolTip with ToolTipTemplateSelector
136+
### Customizing the ToolTip with DataTemplateSelector
114137

115138
You can load different tooltip templates conditionally based on cell data by using a DataTemplateSelector with the `SfDataGrid.ToolTipTemplate` property.
116139

0 commit comments

Comments
 (0)