Personalize Angular material mattooltip and style information for display in tooltip

I need assistance displaying data in a tooltip in JSON format similar to the image provided.

Although I can load the data in the tooltip, it does not appear formatted like the attached picture.

<ng-container matColumnDef="Alert">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Alert </th>
                <td mat-cell *matCellDef="let row">
                        <span matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">{{row.Alert}}</span> 
                </td>
 </ng-container>

You can find the Stackblitz link with the HTML and TypeScript code here.

https://stackblitz.com/edit/angular-mat-tooltip-xngsaq?file=app%2Ftooltip-overview-example.ts

When hovering over the first column, I would like the tooltip to display Conditionals, Offset, and Alert as shown in the attachment.

#EDIT1 I have also attempted using basic HTML tooltips. If anyone has suggestions on how to format the data for this purpose, that would be greatly appreciated.

https://stackblitz.com/edit/angular-mat-tooltip-ik3f8e?file=app%2Ftooltip-overview-example.css

For further information, you can refer to one of these sources: Pretty-print JSON using JavaScript

javascripthtmlcssangularangular-material

Answer №1

After reviewing the code, I have made some improvements:

::ng-deep .mat-tooltip {
 font-size: 15px;
 white-space: pre-wrap;
 color: gray !important;
 background-color: rgba(255, 255, 255, .9);
 border:1px solid gray;
 max-width: unset !important;
}

https://i.sstatic.net/Tc06c.png

Visit this link for more information about Mat Tooltip implementation. --Updated Section--

Please add the following line of code matTooltipClass

<span [matTooltipClass]="{ 'tool-tip': true }" matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">{{row.Alert}}</span> 

Then update the CSS file as follows:


.tool-tip {
     font-size: 15px;
    white-space: pre-wrap;
    color: gray !important;
    background-color: rgba(255, 255, 255, .9) !important;
    border:1px solid gray;
    max-width: unset !important;

    }

If you want to implement it on a button, here is an example:

 <button mat-raised-button
    [matTooltipClass]="{ 'tool-tip': true }" matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}"
    aria-label="Button that displays a tooltip when focused or hovered over">

Make sure to take necessary actions after implementing these changes.

Answer №2

experiment using white-space: pre-wrap;

::ng-deep .mat-tooltip {
   font-size: 15px;
  background: green;
  white-space: pre-wrap;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to extracting the value of an attribute from a Meteor collection object

In my database, I have a collection called Meteor.users. Each user in this collection has an attribute named “lastQuestionAnswered”, which stores the questionId of the last question they answered. { "_id" : "jrCJiuo7eprNFKfLG", "name" : "Elon Musk", " ...

javascriptmongodbmeteor

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

javascripthtmlcss

How can I incorporate Scroll effects using Angular 8 and rxjs 6?

I currently have the template setup like this: <div id="top"> ... </div> Within my component, I've implemented the following method: onTripSave() { let top = document.getElementById('top'); if (top !== null) { to ...

angularangular-animations

Incorporating Firebase administrator into an Angular 4 project

Currently encountering an issue while trying to integrate firebase-admin into my angular project. Despite my efforts, I am unable to resolve the error that keeps popping up (refer to the screenshot below). https://i.stack.imgur.com/kdCoo.png I attempted ...

angulartypescriptfirebasefirebase-admin

Encountering a non-constructor error while trying to import packages in React Typescript

I am currently working on a project that utilizes React with Typescript. While attempting to import a package, I encountered an error stating that the package lacks a constructor when I run the file. This issue seems to be prevalent in various packages, a ...

javascriptreactjstypescript

What is the process for sending an email to a designated recipient through an HTML form and then storing it as a record in an HTML table?

<!-- Placeorder part --> <div data-ng-show = "isPlaceOrder"> <div class = "col-lg-10" style = "margin-top:80px"> <div class="panel panel-primary"> <div class = "panel-heading">Drug Request Mail Sender</div&g ...

htmlangularjsnode.jsexpress

Need to include files within an electron / express application

I'm encountering challenges while setting up an app with: electron express (using mustache templating) firebase My struggle lies in correctly requiring files. The issue seems to stem from the varying "scope" being the electron app or express app, re ...

javascriptnode.jsfirebaseexpresselectron

The perfect timing for incorporating a JavaScript MVC framework into your project

As part of my job at a small web agency specializing in web applications for startups, I'm urging my boss to invest more in developing strong client-side frameworks using Javascript MVC standards like BackboneJS and templating with Underscore. I unde ...

phpjavascriptajaxmodel-view-controller

ensure Selenium waits for animation to finish

I've encountered a problem regarding waiting for an animation to complete. Previously, I could rely on Selenium functions like wait.until(ExpectedConditions.... However, this is no longer sufficient. The element in question can be found in the HT ...

javascriptselenium-webdriver

Sorting does not function properly when utilizing the primeng p-datatable for custom sorting

I am working on an Angular 4 application that uses PrimeNG for a datatable, and I need assistance sorting by the date field named received_at. I have created a StackBlitz with the code I've tried so far: StackBlitz link - PrimeNG datatable Here is ...

angularsortingprimengprimeng-datatable

Trouble with basic JavaScript functionality in a React component

Here is a unique component code snippet: import React, {Component} from 'react'; import 'D:/School/Alta/interactiveweb/src/webapp/src/App.css' class Chat extends Component { test() { alert(); } render() { return <nav ...

javascriptreactjscomponents

What is the best way to parse this JSON data?

Here is a string that I have: [{"data1":"A"},{"data2":"B"},{"data3":"C"}] Using jQuery, I converted this string to JSON: test_json = $.parseJSON('[{"data1":"A"},{"data2":"B"},{"data3":"C"}]'); After conversion, I obtained 3 objects: https:/ ...

javascriptjson

invoking an API within a map function and utilizing the response

vm.owners = parents.children.map(function(e) { getparentById(e.Id) .then(function(getresponse) { var parentLink = '<a href="/#/parent/onboard/' + e.Id + '" target="_blank">' + e.Number + "-&qu ...

javascriptangularjstypescript

Cannot assign border to an undefined element - JavaScript

Currently, I am attempting to validate some code using javascript. However, I am encountering a frustrating issue where I keep getting an "Uncaught TypeError: Cannot set property 'border' of undefined". Being relatively new to javascript, I ...

javascripthtml

How can unicode (%u2014) be handled in JavaScript or C#/.NET?

While browsing through the vast expanse of the internet (specifically on a review site like Rotten Tomatoes), I stumbled upon %u2014. This particular string reminded me of something I once encountered in JavaScript. Although I can't quite recall if it ...

javascript.netunicodeescaping

There was a problem fetching Binary data through the AMQP receiver

Currently, I am attempting to retrieve messages using a nodejs + amqp receiver. In my observation, any binary data exceeding 7f are displayed as ef bf bd. var messageHandler = function (myIdx, msg) { var data = new Buffer(msg.body) console.log(dat ...

javascriptnode.jsamqpbinary-dataraw-data

Click event not functioning in programmatically loaded HTML

I am facing an issue with a JSON file that contains the page content I am trying to load. The link within it appears as follows: <a data-ng-click='foo()'>Bar</a> When I load this page content into the HTML page: <p class="body" ...

javascriptangularjs

What is the best way to utilize Typescript when making queries to Firebase?

I have successfully integrated push notifications for my app using Firebase Cloud Functions. Now, I am looking to enhance the user experience by updating the app's badge count alongside the push notifications. I understand that this can only be achiev ...

javascripttypescriptgoogle-cloud-functions

I am facing an issue in my Vue Project where the CSS does not recognize URLs enclosed in quotes

When attempting to pass over a quoted URL to background-image or cursor, I'm facing an issue where the file simply doesn't load. I am currently working with Vue and have installed the following libraries: Vuetify, SASS, SASS-Loader, and Node-S ...

javascripthtmlcssvue.jssass

Tips on effectively utilizing CSS sprites without a border on images

I am currently working on optimizing my website by using sprite images. The image I am using is in png format and looks like this: https://i.sstatic.net/pFhPq.png Here is a snippet of my CSS code: .bg-upperbar_1 { width: 55px; height: 55px; bac ...

csssprite