- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 SVG 元素,我想在 Angular 中的某个时刻添加一个 matTooltip。我观察到,如果我尝试像这样添加 matTooltip:
generate() {
var svgEle = document.getElementById("testSVG");
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('id', "rect");
rect.setAttribute('x', "73");
rect.setAttribute('y', "95");
rect.setAttribute('class', "st01");
rect.setAttribute('width', "407");
rect.setAttribute('height', "328");
rect.setAttribute('matTooltip', "Info about the action");
svgEle.append(rect)
}
使用html测试代码:
<div style="width:400px">
<svg version="1.1" id="testSVG" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;"
xml:space="preserve">
<style type="text/css">
.st01{fill:#F99191;}
.st11{fill:#92B1F7;}
</style>
<rect x="638.5" y="146" class="st11" width="236" height="219"
matTooltip="Info about the action"/>
</svg>
</div>
<button mat-stroked-button (click)="generate()">Generate</button>
这不起作用。
这种情况下到底有什么问题?
最佳答案
它不起作用,因为 TS 中的 Angular 是一种编译语言。
这意味着 [matTooltip]
对于 TS 编译器可能意味着某些内容,但在 JavaScript 中运行时它并不存在。
Angular 不依赖元素属性来显示工具提示。相反(如果我没记错的话),它使用动态组件渲染来提供绝对定位的丰富组件。
如果您像这样附加工具提示,则与不执行任何操作相同。
关于angular - 为什么动态添加 Angular matTooltip 时不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58120699/
我想知道和的区别 在以下情况下如何绑定(bind)值。例如 [matTooltip] matTooltip(无括号) (点击) 谢谢 最佳答案 1) 带括号——取一个变量值;例如 const myTo
我正在使用 matTooltip来自 Angular Material 的输入字段...输入在 Safari 上有点重叠,因此我无法输入。 我一直在更改工具提示的位置,但 id 没有帮助。 工具提示
我正在尝试在 matTooltip 上添加箭头,有任何方法可以在 matTooltip 上添加箭头。 Action 最佳答案 您需要覆盖 Material 样式。并在伪元素之前
有没有办法可以将工具提示设置为在焦点上而不是悬停时可见? 我试图从 Angular 官方文档中理解并搜索类似的问题,包括这个 Always Show Tooltip ( Angular Materia
为什么 MatTooltip 显示在 html 原生对话框下面? import { Component, ElementRef, ViewChild } from '@angular/core'; @
我正在尝试显示一张卡片列表,这些卡片将随着另一项服务中的数据更新而动态更新。每张卡片都应该有一个工具提示,当用户将鼠标悬停在它上面时会显示该项目的名称。 原来我的代码是这样的:
正如标题所说,如果我按下一个附加了工具提示的按钮并将我重定向到另一个页面,那么 matTooltip 不会消失。显示工具提示并将我重定向到其他页面,但工具提示在同一位置仍然可见。我知道我需要将“tri
我有一个 SVG 元素,我想在 Angular 中的某个时刻添加一个 matTooltip。我观察到,如果我尝试像这样添加 matTooltip: generate() { var svgEle
正如标题所说,如果我按下一个附加了工具提示的按钮并将我重定向到另一个页面,那么 matTooltip 不会消失。显示工具提示并将我重定向到其他页面,但工具提示在同一位置仍然可见。我知道我需要将“tri
我正在创建一个名为 TooltipDirective 的自定义指令,它将向每个宿主元素添加 matTooltip,代码如下所示 import { Directive, ElementRef, Inpu
我有一个 SVG 元素,我想在 Angular 中的某个时刻添加一个 matTooltip。我观察到,如果我尝试像这样添加 matTooltip: generate() { var svgEle
我是 Angular 2 Material 的新手。制作多行工具提示的首选方法是什么? 例如,我可能有以下工具提示: AA BBBBBBBBBB CCCC DDDDD 而且,我可能希望它以这样的多行格
我正在使用 Metronic(从 themeforest 下载)构建一个项目。我正在使用它的角度版本,但我遇到了工具提示向左偏移的样式问题。 尝试重新安装angular、tooltip、hammerj
我有一组称为报告的数据,其中包含一组网络 (report.networks)。在我返回它之前,我有model.ts 来操作networks 数组。我做了一个 ngFor 来迭代网络数据以显示工作正常的
我可以将 MatToolTip 与按钮元素一起使用: delete
我正在尝试在我的仪表板页面中插入通知工具提示,但该工具提示不起作用。我是 Angular 的新手,因此非常感谢任何与此相关的线索。 module.ts .. import {MatToolti
我是一名优秀的程序员,十分优秀!