Html tags not rendering with tooltip

Question

I am trying to render html tag inside the tooltip but tags are coming as text. i don't want to use JQuery. Is there any way to achieve this.

link jsfiddle ->

Demolink

https://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text — Daniel Beck, Sep 26 '18 at 14:05

score 0 · Answer 1 · answered Sep 26 '18 at 14:04

Simply render it as plain HTML, but hide it with ng-show / ng-if.
Then reveal it on hover with ng-mouseover + ng-mouseleave.

Here is the simplest demo:

.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 tags not rendering with tooltip

1 Answers1