Requirement: Create custom Help control that takes HTML markup and HTML Attributes as input.
<script id="TooltipTemplate" type="text/x-kendo-template">
<p class="TooltipHeader"><span class="glyphicon glyphicon-info-sign"></span> Help</p>
<p>#=target.data('title')#</p>
</script>
Assuming you already have an MVC website created with KendoUI core package installed.
Step 1: Create a folder named "Helpers" in the root of your MVC website.
Step 2: Create a static class named "HtmlHelper" under the newly created folder.
Step 3: Use following Namespaces:
using System;
using System.Text;
using System.Web;
using System.Web.Mvc;
Step 4: Create a static function as follows:
public static IHtmlString HelpIcon(this HtmlHelper helper, string Id, Func<object, object> toolTipMarkup = null, object htmlAttributes = null)
{
//StringBuilder for creating a string from htmlAttributes parameter
var attributes = new StringBuilder();
//Read HTML Attributes and construct string out of it
if (htmlAttributes != null)
{
foreach (var prop in htmlAttributes.GetType().GetProperties(BindingFlags.Instance | BindingFlags.Public))
{
attributes.Append($"{prop.Name}= '{prop.GetValue(htmlAttributes, null)}'");
}
}
//StringBuilder for holding the entire markup while it is being constructed
var sb = new StringBuilder();
//Construct markup from the provided child controls
var markup = (toolTipMarkup == null ? "" : toolTipMarkup.DynamicInvoke(helper.ViewContext).ToString());
//Construct final control with markup and htmlAttributes
sb.Append($"<span class='glyphicon glyphicon-info-sign info-in-panelHeader' {attributes} title='{markup}'></span>");
//Return as HTML String
return new HtmlString(sb.ToString());
}
Step 5: Compile the project.
Step 6: Open the view in which you want to render the above control.
Step 7: Add references to the newly created control and Kendo UI on top of your view:
@using Kendo.Mvc.UI
@using <Your ProjectName>.<FolderName>
Example @using HtmlHelpers.Helpers
Step 8: Invoke KendoToolTip script:
$(document).ready(function () {
$(". info-in-panelHeader ").kendoTooltip({
filter: "span.glyphicon-info-sign", width: "375px", position: "right", autoHide: true, content: kendo.template($("#TooltipTemplate").html()),
animation: {
open: {
duration: 200
}
}
});
});
<script id="TooltipTemplate" type="text/x-kendo-template">
<p class="TooltipHeader"><span class="glyphicon glyphicon-info-sign"></span> Help</p>
<p>#=target.data('title')#</p>
</script>
Step 9: Add following markup:
@Html.HelpIcon("hlpFeatureHelp", @<text>
<ul>
<li>This is help text shown as bullet 1</li>
<li> This is help text shown as bullet 2.</li>
</ul>
</text>, new {style= "margin-top:10px; z-index:999999;" })
Run your website, you will find a help icon rendered on your view.
Hover over the icon to activate the tooltip.