AngularJS - render HTML to tooltip

Question

So basically I am displaying some text with ng-bind-html on page as text consist of html element and i have requirement to show the same text when hover your mouse over it.

i have created css class which will show the same text on hover but html tag coming as a text. i found here which says it's not possible.

I am using angularjs, below is html

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

This is my controller

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

angular.bootstrap(document, ['myapp']);

demolink

Is it possible to render it as plain HTML?

Answer 1

No, this is not possible because css content: attr(); in your case:

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

only accept allowed list of types. The list does not contains html/ html tags. Here are allowed types:

<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 | %

There are some experiment by including hexadecimal values there but html tags will not works.

Here are more details about it: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Answer 2

Okay, please check this code also here is working sample https://jsfiddle.net/nezir/tbutbap3/667/ can update by you can update by your needs.

I have change the text and removed h1 tags from text. Also, updated the css, so default text class will use default h1 font size which is in most cases 2em or 24px and also added some bold property here like font-weight: 700; which you

Also, updated hover class font-size: 1em; .

I think that's you are requiring at the end. Generally, update css classes if you need to manipulate text value size or any other property.

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;
}