Я использую приведенный ниже код в моей директиве Angualr 7 для выполнения всплывающей подсказки с помощью Renderer2.Но на самом деле мне нужно простое решение, чтобы реализовать это решение и убедиться, что оно будет работать и с браузером Android и iOS.
Текущее решение:
private div = this.renderer.createElement("div");
this.renderer.addClass(this.div, "tooltip");
this.renderer.addClass(this.div, "fade");
this.renderer.addClass(this.div, "bs-tooltip-top");
this.renderer.setStyle(this.div, "bottom", "initial");
this.renderer.setStyle(this.div, "top", "0");
this.renderer.setStyle(this.div, "right", "0");
const arrowDiv = this.renderer.createElement("div");
this.renderer.addClass(arrowDiv, "arrow");
this.renderer.setStyle(arrowDiv, "left", "50%");
this.renderer.setStyle(arrowDiv, "transform", "translateX(-50%)");
const tooltipDiv = this.renderer.createElement("div");
this.renderer.addClass(tooltipDiv, "tooltip-inner");
const text = (this._option.hasOwnProperty('message')) ? this._option.message : "This field is required";
const tooltipText = this.renderer.createText(text);
this.renderer.appendChild(tooltipDiv, tooltipText);
this.renderer.appendChild(this.div, arrowDiv);
this.renderer.appendChild(this.div, tooltipDiv);
this.renderer.insertBefore(this._el.nativeElement.parentNode, this.div, this._el.nativeElement);
Но я хочу лучшее решение дляпреобразовать строку HTML в элемент DOM с коротким кодом, например:
let div = this.renderer.createElement("div");
const message = "This field is required";
const toolTip = `<div class="tooltip fade bs-tooltip-top show" style="bottom: initial; top: 0px; right: 0px;">
<div class="arrow" style="left: 50%; transform: translateX(-50%);"></div>
<div class="tooltip-inner">${message}</div>
</div>`;
// Here i want to convert this string to DOM element
domElement = create dome element from toolTip and then
this.renderer.appendChild(div, domElement);