Question

我正在尝试在工具提示中呈现html标签，但是标签以文本形式出现。我不想使用JQuery。有什么办法可以做到这一点。

link jsfiddle ->

Demolink

Answer 1

仅将其呈现为纯HTML格式，但使用ng-show / ng-if隐藏它。
然后使用ng-mouseover + ng-mouseleave悬停显示它。

这是最简单的演示：

.ellipsis {
  content: attr(data-title);
  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: 12px;
  margin-right: 13px;
  opacity: 1.1;
  margin-top: 0rem;
  visibility: visible;
}

<!DOCTYPE html>
<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
  <div>

    <input ng-model="i" ng-mouseover="a=true" ng-mouseleave="a=false" />
    <div class="ellipsis" ng-if="a"><b>Hypertext</b> Markup Language</div>
    <br>
    <br>
    <input ng-model="ii" ng-mouseover="aa=true" ng-mouseleave="aa=false" />
    <div class="ellipsis" ng-if="aa"><b>Hypertext</b> Markup Language</div>
    <br>
    <br>
    <input ng-model="iii" ng-mouseover="aaa=true" ng-mouseleave="aaa=false" />
    <div class="ellipsis" ng-if="aaa"><b>Hypertext</b> Markup Language</div>
    <br>
    <br>

  </div>

</body>
</html>

HTML标记未使用工具提示呈现

1 个答案: