- Use the bootstrap "popover" so I could include HTML and style the pop-up
- Include the help text in the config so it could be easily changed in the future
Here's how I did it.
Step 1: add a new section to web.config – this will prevent the text from needing to be escaped or treated with any special handlers
<section name="contextHelp" type="System.Configuration.IgnoreSectionHandler" allowLocation="false" />
Step 2: add the values for the section – I’m using CDATA to hide the markup and that should be sufficient for hyperlinks or images too
<contextHelp>
<groupTitle><![CDATA[A group title with specific identifying information will be easy to search for later.<br /><br />Use specific hierarchy to help.
]]>
</groupTitle>
</contextHelp>
]]>
Step 3: add code to read the config in the code-behind
protected string HelpTextTitle { get; set; }
protected new void Page_Init(object sender, EventArgs e)
{
// Help Sections
XmlDocument doc = new XmlDocument();
doc.Load(AppDomain.CurrentDomain.SetupInformation.ConfigurationFile);
HelpTextTitle = doc.SelectSingleNode("/configuration/contextHelp/groupTitle").FirstChild.Value;
}
Step 4: add values into markup
<a href="#" rel="group_title"><i class="fa fa-question-circle"></i></a>
<script>
$(document).ready(function () {
$("[rel=group_title]").popover({
title : 'Group Title',
html: 'true',
trigger: 'focus',
content: '<%=HelpTextTitle %>'
});
});
</script>
$(document).ready(function () {
$("[rel=group_title]").popover({
title : '
Group Title
',
html: 'true',
trigger: 'focus',
content: '
<%=HelpTextTitle %>
'
});
});
No comments:
Post a Comment