We are developing using Kendo UI / UI for ASP.MVC. The product versions are UI for ASP.NET MVC Q1 2014 and Kendo UI Complete v2014.1.318.
The controls are created using an MVC View as follows and the 'title' attribute used for tooltip is injected from a view model Description attribute.:
@(Html.Kendo().DropDownListFor(m => m.VehicleType)
.HtmlAttributes(new { style = "width:250px" ,
title = ModelMetadata.FromLambdaExpression<IncidentsViewModel, string>(
model => model.VehicleType, ViewData).Description
})
.BindTo(Model.VehicleTypeList)
.OptionLabel("--Select Value--")
)
the Kendo UI tooltip is attached using jquery as follows (this is an example or a dropdown list). The key to this code being that the title attribute is copied from the default input tag for the list to the kendo controls 'wrapper' tag - where the tooltip is attached.
$('.k-widget.k-dropdown.k-header').not("[aria-owns='dlAdmin_listbox']").kendoTooltip({ width: 250, position: "top" });
$('[data-role="dropdownlist"]').each(function () {
var ele = $(this).data("kendoDropDownList");
if (ele && ele.element[0].title && ele.element[0].title != "") {
ele.wrapper[0].title = ele.element[0].title;
ele.element[0].title = "";
}
});
This approach works well in IE 8+ and Chrome. However for FireFox we are intermittantly seing 'flicker' effects when a control is hovered over. I believe that this maybe related to the form scrolling - but I am not certain of this. It seems to occur more frequently when there are many controls with many tooltips on a form.
I attach a sample project to demonstrated this issue.
Thank
Ian
The controls are created using an MVC View as follows and the 'title' attribute used for tooltip is injected from a view model Description attribute.:
@(Html.Kendo().DropDownListFor(m => m.VehicleType)
.HtmlAttributes(new { style = "width:250px" ,
title = ModelMetadata.FromLambdaExpression<IncidentsViewModel, string>(
model => model.VehicleType, ViewData).Description
})
.BindTo(Model.VehicleTypeList)
.OptionLabel("--Select Value--")
)
the Kendo UI tooltip is attached using jquery as follows (this is an example or a dropdown list). The key to this code being that the title attribute is copied from the default input tag for the list to the kendo controls 'wrapper' tag - where the tooltip is attached.
$('.k-widget.k-dropdown.k-header').not("[aria-owns='dlAdmin_listbox']").kendoTooltip({ width: 250, position: "top" });
$('[data-role="dropdownlist"]').each(function () {
var ele = $(this).data("kendoDropDownList");
if (ele && ele.element[0].title && ele.element[0].title != "") {
ele.wrapper[0].title = ele.element[0].title;
ele.element[0].title = "";
}
});
This approach works well in IE 8+ and Chrome. However for FireFox we are intermittantly seing 'flicker' effects when a control is hovered over. I believe that this maybe related to the form scrolling - but I am not certain of this. It seems to occur more frequently when there are many controls with many tooltips on a form.
I attach a sample project to demonstrated this issue.
Thank
Ian