question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

You have a HelpText method, can you also add a HelpIcon method that produces the below HTML after the label?

<a title="" role="button" data-original-title="" data-toggle="popover" data-placement="auto" data-content="Help text description here, with support of <strong>html content.</strong>" data-trigger="focus"><span class="fa fa-info-circle"></span></a>

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
johnwccommented, Nov 18, 2016

You should not be doing anything with the label in the method. You can use this extension that I created to accomplish this. You can remove the ShowRequiredStar call if you want, I did not want it to be there if there was a help icon.

public static BootstrapLabel<TModel> HelpIcon<TModel>(this BootstrapLabel<TModel> label, string helpText, string helpTitle)`
{
    if (!string.IsNullOrWhiteSpace(helpText))
    {
        TagBuilder a = new TagBuilder("a");
        a.Attributes.Add("title", helpTitle);
        a.Attributes.Add("role", "button");
        a.Attributes.Add("data-original-title", "");
        a.Attributes.Add("data-toggle", "popover");
        a.Attributes.Add("data-placement", "auto");
        a.Attributes.Add("data-content", helpText);
        a.Attributes.Add("data-trigger", "focus");
        a.Attributes.Add("data-html", "true");
        TagBuilder span = new TagBuilder("span");
        span.AddCssClass("fa");
        span.AddCssClass("fa-question-circle");
        a.InnerHtml = span.ToString();
        label.AppendHtml(new MvcHtmlString(a.ToString()));
        label.ShowRequiredStar(false);
    }
    return label;
}
0reactions
markusgudcommented, Nov 18, 2016

I tried using the new AppendHtml function to add an icon with popover. The problem is that it will be rendered outside the label, so it will ruin the form layout.

I also tried this, which works fine, except when the “required star” is shown, then the icon is rendered between the label and the “required star” instead of after the “required star”.

{
  ...
  var lbl = tb.Label().Widths(Model.LabelWidths);
}
@lbl.LabelText(Model.Label).LabelHtml(Html.Bootstrap().Icon("glyphicon glyphicon-info-sign").Popover(new Popover(Model.Label, Model.Popover).Closeable())).ShowRequiredStar(Model.IsRequired)

Is it possible to make sure it is rendered as the last element within the label always?

Read more comments on GitHub >

github_iconTop Results From Across the Web

HELPICON
Application Designer 8.3.8 · Layout Elements; HELPICON. HELPICON. For detailed information on the HELPICON control, see Online Help Management.
Read more >
org.pdfsam.ui.help.HelpUtils.helpIcon java code examples
HelpPopup popup = new HelpPopup(content); return helpIcon(popup); ... How to use. helpIcon. method. in. org.pdfsam.ui.help.HelpUtils ...
Read more >
zombie.ui Class HelpIcon
Method Summary. void, ButtonClicked(java.lang.String name). boolean, onMouseDown(int x, int y). boolean, onMouseMove(int dx, int dy).
Read more >
Class HelpIcon
Modifier and Type, Method, Description. void, ButtonClicked​(java.lang.String string). java.lang.Boolean, onMouseDown​(double double1, double double2).
Read more >
How to use Material Icon Help Icon
Material Icon Help Icon. Last update on August 19 2022 21:50:32 (UTC/GMT +8 hours) ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found