AngularJS - 将 HTML 渲染到工具提示

Question

所以基本上我在页面上显示一些带有ng-bind-html的文本，因为文本由html元素组成，并且当将鼠标悬停在上面时，我需要显示相同的文本。

我创建了CSS类，它将在悬停时显示相同的文本，但HTML标签以文本形式出现。 我在这里找到说这是不可能的。

我正在使用angularjs，下面是html

<div ng-controller="foo">
<p class="ellipsis" ng-bind-html="bar" data-text="{{bar}}"></p>
</div>

这是我的控制器

angular.module('myapp', ['ngSanitize']).controller('foo', function($scope) {
$scope.bar = "<h1>this is bar</h1>"; }); 
angular.bootstrap(document, ['myapp']);

演示链接

是否可以将其呈现为纯 HTML？

Answer 1

不，这是不可能的，因为 css 在您的情况下content: attr();：

.ellipsis:focus:after, .ellipsis:hover:after {
content: attr(data-text); 

仅接受允许的类型列表。该列表不包含 html/html 标记。 以下是允许的类型：

<type-or-unit> = string | integer | color | url | integer | number | length | angle | time | frequency | em | ex | px | rem | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | deg | grad | rad | ms | s | Hz | kHz | %

有一些实验可以在那里包含十六进制值，但 html 标签不起作用。

以下是有关它的更多详细信息： https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Answer 2

好的，请检查此代码，这也是工作示例 https://jsfiddle.net/nezir/tbutbap3/667/您可以根据需要进行更新。

我已经更改了文本并从文本中删除了 h1 标签。此外，更新了 css，因此默认文本类将使用默认的 h1 字体大小，在大多数情况下为2em或 24px，并且还在此处添加了一些粗体属性，例如您font-weight: 700;

此外，更新了悬停类font-size: 1em;。

我认为这就是你最后的要求。通常，如果需要操作文本值大小或任何其他属性，请更新 css 类。

angular.module('myapp', ['ngSanitize'])
.controller('foo', function($scope) {
$scope.bar = "this is bar";
});
angular.bootstrap(document, ['myapp']);

.ellipsis {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1;
font-size: 2em;
font-weight:700;
}
.ellipsis:focus:after, .ellipsis:hover:after {
content: attr(data-text);
overflow: visible;
text-overflow: inherit;
background: #191919;
position: absolute;
border-radius:0.4rem;
padding: 0 .5rem;
white-space: normal;
word-wrap: break-word;
display: block;
color: white;
z-index: 1;
font-size: 1em;
margin-right: 13px;
opacity: 1.1;
margin-top: 0rem;
}