# Header Tooltip

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content

You can add tooltips to the FlexGrid column headers. FlexGrid can be used in conjunction with Wijmo's Tooltip control to display data when you hover the mouse cursor over column headers in the FlexGrid control.

![MVC FlexGrid Column Header](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgridcolumnheadertooltip.png)

Following example shows how you can bind Tooltips to the column headers of FlexGrid control. The example uses **Sale.cs** model which was added to the application in the [Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart) topic:

### Controller code

```razor
public ActionResult Index()
{
    var model = Sale.GetData(20);
    return View(model);
}
```

### View code

```razor
@model IEnumerable<Sale>
<style>
    .hdr-tip {
        background: lavender;
        color: mediumvioletred;
        padding: 1em 2em;
        margin: .5em;
        border-radius: 1em;
    }
        .hdr-tip .col-header {
            color: darkviolet;
            font-weight: bold;
            font-size: 150%;
        }
</style>
<script type="text/javascript">
    var hdrTips;
    c1.documentReady(function () {
        // Column header tooltips
        hdrTips = new wijmo.Tooltip({
            position: wijmo.PopupPosition.RightTop,
            showAtMouse: true,
            showDelay: 600,
            cssClass: 'hdr-tip'
        });
    });
    function formatItem(panel, r, c, cell) {
        if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
            hdrTips.setTooltip(cell, 'This is column<br/>' +
                '<span class="col-header">' + panel.columns[c].header + '</span>');
        }
    }
    function loadingRows() {
        if (hdrTips) {
            hdrTips.dispose();
        }
    }
</script>
@(Html.C1().FlexGrid<Sale>()
            .Id("gridHeaderTooltips")
            .AutoGenerateColumns(false)
            .CssClass("grid")
            .IsReadOnly(true)
            .Bind(Model)
            //Binding columns data to FlexGrid
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("ID"));
                bl.Add(cb => cb.Binding("Start"));
                bl.Add(cb => cb.Binding("Country"));
                bl.Add(cb => cb.Binding("Product"));
                bl.Add(cb => cb.Binding("Amount").Format("c"));
                bl.Add(cb => cb.Binding("Discount").Format("p0"));
            })
            .ItemFormatter("formatItem")
            .OnClientLoadingRows("loadingRows")
)
```
## Sorting

**SortOrder** feature that allows users to determine how columns are sorted. Sorting also supports ARIA (Accessible Rich Internet Applications).

| Property | Type | Values | Description |
| -------- | ---- | ------ | ----------- |
| sort-order | SortOrder | <ol><li>AscDesc</li><li>DescAsc</li><li>AscDescNone</li><li>DescAscNone</li></ol> | <span class="cf0">Defines the sort cycle for a column:</span><br><span class="cf1">• AscDesc: Ascending Descending</span><br><span class="cf1">• DescAsc: Descending Ascending</span><br><span class="cf1">• AscDescNone: Ascending Descending None</span><br><span class="cf1">• DescAscNone: Descending Ascending None</span> |
| <span class="cf0">aria-labelled-by</span> | <span class="cf0">String</span> | <span class="cf0">User-defined </span> | <span class="cf0">Defines an ARIA label reference for screen readers to describe the control.</span> |