What is the best way to set the title of the <span>/<div> tag in order for it to display the <br/> tag in the content and show a tooltip on separate lines?

Question

What is the best way to set the title of the <span>/<div> tag in order for it to display the <br/> tag in the content and show a tooltip on separate lines?

I have this AngularJS code sample that reads the HTML tag within the data and displays the content on the screen with the following message:
Hi Mike!
Good Morning!!!

I need to modify it so that the title or tooltip also shows the content in two separate lines, considering the br tag within the data. Currently, the title/tooltip displays as Hi Mike! <br/> Good Morning!!! in a single line.

Here is the Sample Code:

<html ng-app>
<head>
    <title>Sample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js"

type="text/javascript">

<script type="text/javascript">
            function SampleCtrl($scope) {
                $scope.message = "Hi Mike! <br/> Good Morning!!!"
            }   

        </script>
</head>
<body>
    <div ng-controller="SampleCtrl">
        <span title="{{message}}" ng-bind-html-unsafe="message"></span>
    </div>
</body>
</html>

javascript jquery html css angularjs

Answer 1

Answer №1

Instead of relying on the HTML break tag, you can use a new line character \n. The title attribute treats its content as plain text, so it won't interpret any HTML tags.

Take a look at this example: http://jsfiddle.net/tcjbkqqz/

var app = angular.module('test', []);
app.controller('SampleCtrl', function($scope) {
     $scope.message = "Hello John!\nHave a great day!!!"
});

Answer 2

Instead of relying on the HTML break tag, you can use a new line character \n. The title attribute treats its content as plain text, so it won't interpret any HTML tags.

Take a look at this example: http://jsfiddle.net/tcjbkqqz/

var app = angular.module('test', []);
app.controller('SampleCtrl', function($scope) {
     $scope.message = "Hello John!\nHave a great day!!!"
});

Answer 3

Answer №2

Take a look at $sanitize - https://docs.angularjs.org/api/ngSanitize/service/$sanitize

You have the option to utilize it within a directive to properly display HTML in model content, rather than just displaying it as plain text.

<span ng-bind-html="message"></span>

In a recent project where user input needed to be trusted, I developed a filter using $sce. https://docs.angularjs.org/api/ng/service/$sce

.filter('trusthtml', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
})

For your specific case, you could implement it like this -

<span ng-bind-html="message | trusthtml"></span>

Which version of angular are you currently using? It appears that ng-bind-html-unsafe (the directive being used) has been deprecated, and relevant documentation is no longer available.

Answer 4

Take a look at $sanitize - https://docs.angularjs.org/api/ngSanitize/service/$sanitize

You have the option to utilize it within a directive to properly display HTML in model content, rather than just displaying it as plain text.

<span ng-bind-html="message"></span>

In a recent project where user input needed to be trusted, I developed a filter using $sce. https://docs.angularjs.org/api/ng/service/$sce

.filter('trusthtml', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
})

For your specific case, you could implement it like this -

<span ng-bind-html="message | trusthtml"></span>

Which version of angular are you currently using? It appears that ng-bind-html-unsafe (the directive being used) has been deprecated, and relevant documentation is no longer available.

What is the best way to set the title of the <span>/<div> tag in order for it to display the <br/> tag in the content and show a tooltip on separate lines?

Answer №1

Answer №2

Similar questions

The Mongoose _id seems to be malfunctioning when a custom value is used instead of the default value

Is there a way to preserve the original color format without converting it to RGB

Error Handling in React with Stripe Payments

Effortless method to handle package.json configurations

enhancing the appearance of the initial sentence in the closing passage through CSS styling

Most efficient method to retrieve a specific element from an array without the need for iteration

What is the method by which frameworks such as Angular encapsulate CSS within a component?

Choose the tr element using JQuery when none of the images in the td contain the file name example.png

Implementing dynamic content loading using CSS and jQuery upon link/button activation

Steps for building HTML based on the provided layout

PHP was unable to retrieve the values sent by AJAX

Having issues with the functionality of the Jquery-turbolinks gem

I am currently working with a for loop within an object in JavaScript, but there seems to be a problem with one

Unable to get jquery toggle() to function in chrome or safari

Use jQuery UI draggable to create a clone with a shadow effect

Is it feasible to separate the bin and lib dependencies in an npm module?

Changing the properties of the admin bar when it is hovered over in

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Interactive chat feature with live updates utilizing jQuery's $.Ajax feature for desktop users

Iterate through TD elements to retrieve their values