додавання підказки / посилання до кутового формального поля - javascript, angularjs, форми, кутові-формлені

В даний час я використовую кутові формально для генерації моїх форм ... це працює чудово, але зараз я стикаюся з проблемою, де я не можу вкласти підказки для інструментів для форм.

Я б дуже хотів, щоб підказка інструмента, коли користувач наводить на вхід або поруч із ним ....

Я склав директиву, яка дозволить мені додавати підказки до окремих полів.

формально:

        {
className: "row",
fieldGroup: [
{
fieldGroup: [
{
key: "page",
type: "horizontalInputFees",
name: "Number of Pages",
templateOptions: {
label: "# of pages",
type: "number",
max: 100,
min: 0,
maxlength: 3,
onFocus: hideFieldErrors,
onBlur: showFieldErrors
},
validation: addValidation()
}
]
}
]
}

директива підказки, яку я хочу додати поруч із полями:

              <li>
<custom-tooltip id="main-search-tt" placement=""right"" icon-class=""icon-question-circle"">
<a ui-sref="pages">Pages</a>
</custom-tooltip>
</li>

Я думаю, моє питання буде .... чи є спосіб, що я можу додати HTML поруч із певними формально полями / вводами?

Відповіді:

Вам не потрібно було складати директиву, ви могли просто загортати етикетку або шаблон bootstrapLabel:

app.config(function (formlyConfigProvider) {
formlyConfigProvider.setWrapper([{name: "bootstrapLabel",
overwriteOk: true,
template: "<div>" +
"<style> .tooltip-inner {max-width: 375px;}</style>" +
"<label for="{{id}}" class="control-label {{to.labelSrOnly ? "sr-only" : ""}}" ng-if="to.label">" +
"{{to.label}}" +
"{{to.required ? "*" : ""}}" +
"</label><i style="margin-left: 5px;" ng-if="to.tooltip" class="control-label-help glyphicon glyphicon-question-sign" uib-tooltip-html="to.tooltip.content" tooltip-is-open="false" tooltip-trigger="mouseenter"></i>" +
"<formly-transclude></formly-transclude>"+
"</div>"
}]);

Тоді ви будете використовувати його так:

    templateOptions: {
label: "Test",
options: [{ value: "testID", name: "Test ID" }, { value: "Test ID", name: "Test2 ID" }],
tooltip: {
content: $sce.trustAsHtml("Test this out <br> You can write HTML in here <br> <b>Bold</b> <i>italics</i> <ul><li>part of a list</li></ul> <br> ")}
}

Це покаже підказку UI-Bootstrap поруч ізмітка, яка відкриється при натисканні на неї мишкою. Ви можете записати HTML у вміст підказки всередині шаблонуOptions, і він буде правильно відформатований.