tooltip

<div class="col-xs-12 remove-side-padding">
    @(Html.Kendo().TreeList<Totalkontroll.Entities.PersonaldokumentViewModel>()
          .Name("treelist")
          .HtmlAttributes(new {@class = "border-zero jobbox-treelist"}) //jobbox treelist class overrides Kendo treelist styling with our own
          .Columns(columns =>
          {
              columns.Add().Field(e => e.Name).HeaderTemplateId("NameColum").TemplateId("NameField").HeaderAttributes(new {@class = "k-header col-xs-5"}).HtmlAttributes(new {@class = "col-xs-5 remove-side-padding", @style = "position:relative;"});
              columns.Add().Field(e => e.CreatedDate).HtmlAttributes(new {@class = "col-xs-2", @style = "position:relative;overflow:initial;padding:0px;"}).HeaderAttributes(new {@class = "k-header col-xs-2 remove-side-padding"});
              columns.Add().Field(e => e.CreatedByName).HtmlAttributes(new {@class = "col-xs-3", @style = "position:relative;overflow:initial;padding:0px;"}).HeaderAttributes(new {@class = "k-header col-xs-3 remove-side-padding"});
              columns.Add().Field(Resources.Department_Index_ListHeader_Handling).HtmlAttributes(new {@class = "col-xs-1", @style = "position:relative;overflow:initial;padding:0px;"}).HeaderAttributes(new {@class = "k-header text-right-important col-xs-1"});
          })
          .DataSource(dataSource => dataSource
              .Read(read => read.Action("All", "Personaldokumenter", new {ids = Model.DocumentIds})) //The controller action that returns the items to display.
              .ServerOperation(false)
              .Model(m =>
              {
                  m.Id(f => f.Id);
                  m.ParentId(f => f.ParentId);
                  m.Expanded(@Model.ExpandFolders);
                  //m.Field(f => f.Description);
                  //m.Field(f => f.ParentId);


              })
          )

          .Events(events =>
          {
              events.DataBound("onDataBound"); //Run the onDataBound javascript function on event DataBound
          })
          )
</div>

<script id="NameField" type="text/x-kendo-template">
    @{
        var imageUrl = "#= Image#";
        var id = "#= UrlLink#";
        var EditDocumentImage = "#= EditDocumentImage#";
        var EditDocumentImageClass = "#= ClassEditDocumentImage#";
        var toolTipId = "#= ToolTipId#";


    }
    <span style="position : relative; top: 6px; padding-right : 10px">
        <svg class="image-fill-grey" width=" 24px" height="24px" viewBox="0 0 24 24"><use xlink:href="\\#@imageUrl"></use></svg>
    </span>

    <a href="@id" class="list-view-big-field text-decoration-none #=ClassProperties#">#=Name#</a>

    <span id="@toolTipId" style="padding-top : 7px; padding-right : 25px; z-index : 2" class="pull-right">
        <svg class="image-fill-grey @EditDocumentImageClass" width=" 16px" height="16px" viewBox="0 0 24 24">
            <use xlink:href="\\#@EditDocumentImage"></use>
        </svg>
    </span>
</script>