Skip to content

Commit c3d1985

Browse files
dhivyasyncfusiondhivyasyncfusion
authored
Merge pull request #6569 from syncfusion-content/978180-ToolTip
978180: Need to add Tooltip feature in UG documentation
2 parents ae399fd + c51d9bf commit c3d1985

File tree

1 file changed

+245
-0
lines changed

1 file changed

+245
-0
lines changed

‎blazor/datagrid/cell.md‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -764,6 +764,251 @@ The following example demonstrates, how to set the [ClipMode](https://help.syncf
764764

765765
The Syncfusion Blazor DataGrid allows you to display information about the Grid columns to the user when they hover over them with the mouse.
766766

767+
### Show tooltip
768+
769+
The Syncfusion Blazor DataGrid provides a built-in feature to display tooltips when hovering over header and content cells. You can enable this feature by setting the `ShowTooltip` property to **true** in the DataGrid.
770+
By default, it shows the cell value for both header and content cells. For special types like templates, it displays the row data of the corresponding cells.
771+
772+
The following example demonstrates, how to set the `ShowTooltip` property in the DataGrid.
773+
774+
{% tabs %}
775+
{% highlight razor tabtitle="Index.razor" %}
776+
777+
@using Syncfusion.Blazor.Grids
778+
779+
<SfGrid DataSource="@Orders" ShowTooltip="true" Width="700">
780+
<GridColumns>
781+
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
782+
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="80"></GridColumn>
783+
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="70"></GridColumn>
784+
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="90"></GridColumn>
785+
</GridColumns>
786+
</SfGrid>
787+
788+
@code {
789+
private SfGrid<OrderData> Grid;
790+
public List<OrderData> Orders { get; set; }
791+
792+
protected override void OnInitialized()
793+
{
794+
Orders = OrderData.GetAllRecords();
795+
}
796+
}
797+
798+
{% endhighlight %}
799+
{% highlight c# tabtitle="Order.cs" %}
800+
801+
public class OrderData
802+
{
803+
public static List<OrderData> Orders = new List<OrderData>();
804+
public OrderData()
805+
{
806+
807+
}
808+
public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight)
809+
{
810+
this.OrderID = OrderID;
811+
this.CustomerID = CustomerID;
812+
this.OrderDate = OrderDate;
813+
this.Freight = Freight;
814+
}
815+
public static List<OrderData> GetAllRecords()
816+
{
817+
if (Orders.Count() == 0)
818+
{
819+
int code = 10;
820+
for (int i = 1; i < 2; i++)
821+
{
822+
Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38));
823+
Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38));
824+
Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77));
825+
Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38));
826+
Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38));
827+
Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31));
828+
Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37));
829+
Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34));
830+
Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33));
831+
code += 5;
832+
}
833+
}
834+
return Orders;
835+
}
836+
public int? OrderID { get; set; }
837+
public string CustomerID { get; set; }
838+
public DateTime? OrderDate { get; set; }
839+
public double? Freight { get; set; }
840+
}
841+
842+
{% endhighlight %}
843+
{% endtabs %}
844+
845+
{% previewsample "https://blazorplayground.syncfusion.com/embed/htrSjFVnKuSghwyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
846+
847+
### Tooltip template
848+
849+
The Syncfusion Blazor DataGrid component provides a built-in option to customize tooltip content for both header and content cells. This can be achieved using the `TooltipTemplate` property, which accepts a `RenderFragment` under the `GridTemplates` component.
850+
851+
This feature allows you to display additional information about columns when users hover over them, enhancing the clarity and usability of the DataGrid.
852+
Tooltip customization is supported through the `TooltipTemplateContext`, which provides access to the following built-in properties:
853+
<ul>
854+
<li><strong>Value</strong> – Displays the content of the hovered cell: the column name for header cells or the cell value for content cells.</li>
855+
<li><strong>RowIndex</strong> – Indicates the row number of the hovered cell. Returns -1 for header cells.</li>
856+
<li><strong>ColumnIndex</strong> – Indicates the column number of the hovered cell.</li>
857+
<li><strong>Data</strong> – Provides the full data object of the hovered row. Not available for header cells.</li>
858+
<li><strong>Column</strong> – Contains metadata about the column, such as the field name and formatting.</li>
859+
</ul>
860+
861+
The following sample demonstrates a custom tooltip implementation using the `TooltipTemplate` in the DataGrid. The tooltip content is styled and includes interactive elements such as formatted text, icons, and contextual information to improve the overall user experience.
862+
863+
{% tabs %}
864+
{% highlight razor tabtitle="Index.razor" %}
865+
866+
@using Syncfusion.Blazor.Grids
867+
868+
<SfGrid DataSource="@GridData" Height="330" ShowTooltip="true" Width="700">
869+
<GridTemplates>
870+
<TooltipTemplate>
871+
@{
872+
var tooltip = context as TooltipTemplateContext;
873+
var order = tooltip?.RowData as OrdersDetails;
874+
if (tooltip?.RowIndex == -1)
875+
{
876+
if (tooltip.Value == "Order ID")
877+
{
878+
<span><strong>@tooltip.Value: </strong>Unique number used to identify each customer order.</span>
879+
}
880+
881+
else if (tooltip.Value == "Customer ID")
882+
{
883+
<div>
884+
<span><strong>@tooltip.Value: </strong>Displays the name of the customer who placed the order.</span>
885+
</div>
886+
}
887+
else if (tooltip.Value == "Freight")
888+
{
889+
<span><strong>@tooltip.Value: </strong>Shipping cost for the order. </span>
890+
}
891+
else
892+
{
893+
<span><strong>@tooltip.Value: </strong>Name of the city where the order is delivered.</span>
894+
}
895+
}
896+
897+
else
898+
{
899+
var fieldName = tooltip?.Column?.Field;
900+
<div style="font-family: Arial; line-height: 1.6;">
901+
@switch (fieldName)
902+
{
903+
case nameof(order.OrderID):
904+
<p style="margin: 2px 0;">@((MarkupString)GetStatusMessage(order.Status, order.OrderDate))</p>
905+
break;
906+
907+
case nameof(OrdersDetails.CustomerID):
908+
<div>
909+
<p style="margin: 2px 0;">
910+
<strong>EmailID: </strong><a href="mailto:@order.Email">@order.Email</a>
911+
</p>
912+
</div>
913+
break;
914+
915+
case nameof(OrdersDetails.Freight):
916+
<p style="margin: 4px 0;">
917+
<strong>Delivery Type: </strong>
918+
@GetDeliveryType(order.Freight)
919+
</p>
920+
break;
921+
922+
case nameof(OrdersDetails.ShipCity):
923+
<span class="e-icons e-location"></span>
924+
<strong>Country: </strong> @order.ShipCountry
925+
break;
926+
927+
default:
928+
<strong>@tooltip?.Column?.Field: </strong> @tooltip.Value
929+
break;
930+
}
931+
</div>
932+
}
933+
}
934+
</TooltipTemplate>
935+
</GridTemplates>
936+
<GridColumns>
937+
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
938+
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="90"></GridColumn>
939+
<GridColumn Field=@nameof(OrdersDetails.Freight) Format="C2" Width="80" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit"></GridColumn>
940+
<GridColumn Field=@nameof(OrdersDetails.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
941+
</GridColumns>
942+
</SfGrid>
943+
944+
<style>
945+
.e-icons.e-location:before {
946+
position: relative;
947+
top: 2px;
948+
}
949+
950+
</style>
951+
952+
@code {
953+
public List<OrdersDetails> GridData { get; set; }
954+
955+
protected override void OnInitialized()
956+
{
957+
GridData = new List<OrdersDetails>
958+
{
959+
new OrdersDetails { OrderID = 1001, CustomerID = "Nancy", Freight = 80, ProductName = "Laptop", OrderDate = DateTime.Now.AddDays(-1), ShipCity = "Reims", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "[email protected]", DeliveryDays = "5-7 days" },
960+
new OrdersDetails { OrderID = 1002, CustomerID = "Andrew", Freight = 120, ProductName = "Smartphone", OrderDate = DateTime.Now.AddDays(3), ShipCity = "Munster", ShipCountry = "Germany", Status = "Pending", Location = "Germany", Email = "[email protected]" , DeliveryDays = "3-4 days"},
961+
new OrdersDetails { OrderID = 1003, CustomerID = "Janet", Freight = 180, ProductName = "Tablet", OrderDate = DateTime.Now.AddDays(-3), ShipCity = "Charleroi", ShipCountry = "Belgium", Status = "Cancelled", Location = "Belgium", Email = "[email protected]" , DeliveryDays = "1-2 days"},
962+
new OrdersDetails { OrderID = 1004, CustomerID = "Margaret", Freight = 60, ProductName = "Monitor", OrderDate = DateTime.Now.AddDays(-4), ShipCity = "Lyon", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "[email protected]" , DeliveryDays = "5-7 days"},
963+
new OrdersDetails { OrderID = 1005, CustomerID = "Steven", Freight = 130, ProductName = "Keyboard", OrderDate = DateTime.Now.AddDays(4), ShipCity = "Delhi", ShipCountry = "India", Status = "Pending", Location = "India", Email = "[email protected]" , DeliveryDays = "3-4 days"},
964+
new OrdersDetails { OrderID = 1006, CustomerID = "Michael", Freight = 220, ProductName = "Mouse", OrderDate = DateTime.Now.AddDays(-6), ShipCity = "Tokyo", ShipCountry = "Japan", Status = "Delivered", Location = "Japan", Email = "[email protected]" , DeliveryDays = "1-2 days" },
965+
new OrdersDetails { OrderID = 1007, CustomerID = "Robert", Freight = 90, ProductName = "Printer", OrderDate = DateTime.Now.AddDays(-7), ShipCity = "Toronto", ShipCountry = "Canada", Status = "Cancelled", Location = "Canada", Email = "[email protected]" , DeliveryDays = "5-7 days"},
966+
new OrdersDetails { OrderID = 1008, CustomerID = "Laura", Freight = 160, ProductName = "Camera", OrderDate = DateTime.Now.AddDays(1), ShipCity = "Sydney", ShipCountry = "Australia", Status = "Pending", Location = "Australia", Email = "[email protected]", DeliveryDays = "1-2 days" },
967+
new OrdersDetails { OrderID = 1009, CustomerID = "Anne", Freight = 90, ProductName = "Laptop", OrderDate = DateTime.Now.AddDays(-9), ShipCity = "Reims", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "[email protected]" ,DeliveryDays = "5-7 days" },
968+
};
969+
}
970+
private string GetStatusMessage(string status, DateTime? orderDate)
971+
{
972+
return status switch
973+
{
974+
"Cancelled" => "This item has been cancelled and will not be delivered.",
975+
"Pending" => $"<strong>Expected Delivery Date: </strong> {orderDate?.ToShortDateString()}",
976+
"Delivered" => $"<strong>Delivered Date: </strong> {orderDate?.ToShortDateString()}",
977+
_ => "<strong>Status Unknown</strong>"
978+
};
979+
}
980+
private string GetDeliveryType(double freight)
981+
{
982+
if (freight <= 100.00)
983+
return "Standard Delivery";
984+
else if (freight <= 150.00)
985+
return "Express Delivery";
986+
else
987+
return "Premium Delivery";
988+
}
989+
public class OrdersDetails
990+
{
991+
public int? OrderID { get; set; }
992+
public string? CustomerID { get; set; }
993+
public DateTime? OrderDate { get; set; }
994+
public double Freight { get; set; }
995+
public string? ShipCity { get; set; }
996+
public string? ShipCountry { get; set; }
997+
public string? Status { get; set; }
998+
public string? Location { get; set; }
999+
public string? ProductName { get; set; }
1000+
public string? Email { get; set; }
1001+
public string? DeliveryDays { get; set; }
1002+
}
1003+
}
1004+
1005+
{% endhighlight %}
1006+
{% endtabs %}
1007+
1008+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDryjujMCPDfWrVi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
1009+
1010+
> By default, custom tooltips will be displayed if the `ShowTooltip` property is set to **true**.
1011+
7671012
### Display custom tooltip for columns
7681013

7691014
The Syncfusion Blazor DataGrid provides a feature to display custom tooltips for its columns using the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started). This allows you to provide additional information about the columns when the user hovers over them.

0 commit comments

Comments
 (0)