Hovering over a table cell triggers a popup in Angular

Inserted a class into

<td><span class="only-show-on-hover"></span></td>

CSS code for the class

td span.only-show-on-hover { visibility: hidden; } td:hover span.only-show-on-hover { visibility: visible; }

Code for dialog box

<div class="bg-white mpd-container brs-6 p-2 pl-4"><div class="d-flex"><div class="mpd-pic"><img width="50" class="mr-2 mt-2" src="assets/images/dummy-user.svg" alt="" /></div></div><div class="d-flex my-2"><div class="profile-completion">Completion will go here</div></div></div>

How to open a popup as shown in the image https://i.sstatic.net/BALZR.png

I attempted to add the dialog box, but it is displaying inside the td. I need it to appear as a popup like in the image.

javascriptangulartypescriptbootstrap-4

Answer №1

<td [ngbPopover]="popContent" [container]="'body'" triggers="mouseenter:mouseleave">Main Responsibilities</td>

<ng-template #popContent>
<span>Job Profile</span>
<span>Education Background</span>
<span>Required Technical Skills (2 Mandatory)</span>
</ng-template>

Check this for more information : link See how it works here: Example

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

Expansive menu that stretches the full height of the webpage

I'm having difficulty making my side spry menu extend the full length of the webpage. I tried using this code: $("nav").css({ "height" : $("nav").height() }); but it still isn't working as expected. I just want the grey color, like ...

javascriptjqueryhtmlcss

Combining promises to handle the asynchronous promise received from this.storage.get() function

Struggling with managing asynchronous data retrieval from local storage in my Angular2/ionic2 app. The code snippet I'm using: request(args) { var headers = new Headers(); headers.append('Content-Type', 'application/json&a ...

angularjsasynchronoustypescript

The pop-up fails to appear

Could you assist me in identifying the issue with my code? <script type="text/javascript"> function PopupCenter(pageURL, title,w,h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)- ...

javascriptphphtml

The attempt to fetch an additional 10 items through an AJAX call failed to meet expectations

I want to implement a feature where 10 items are loaded each time the "load more" button is clicked. Initially, I send the first 10 items and use dajaxice to load another set of 10 items everytime the button is pressed. Below is my view: def dj(request, ...

javascriptpythonajaxdjangodajaxice

How can I use JavaScript to disable a table row and then save the selected option in a MySQL database?

I have a PHP snippet that dynamically displays table rows. Each row contains a radio button with "Yes" and "No" options. I have implemented a JS function where, upon choosing an option, a pop-up box is displayed. If the user selects the "Yes" option in t ...

javascriptphphtmlmysqlradio-button

Update the attribute of the trigger in Bootstrap's Modal by using the input value from the modal

I want to capture both the modal invoker and the user input value provided in my modal. To access the invoker, I can use the following code: $('#myModal').on('show.bs.modal', function (e) { var invoker = $(e.relatedTarget); }); A ...

bootstrap-4bootstrap-modal

How to utilize View as a substitute for the div tag in your Web Project

Undoubtedly, when working on a web project, it is common practice to use the div element like this: <div> sample text </div> However, using div in React Native can lead to errors: <View> sample text </View> Is there a way to ...

javascriptreactjsreact-native

Angular 1.5 Karma unit test causes duplicate loading of ng-mock library

My current web app is built using Typescript 2.4.2 and compiled with the latest Webpack version (2.7.0). I am in the process of incorporating Karma tests utilizing Jasmine as the assertion library. Below is my karma configuration file: 'use strict& ...

typescriptwebpackkarma-runnerangular-mock

My JavaScript code is not triggering during the page load. Could this be related to .net

I've been attempting to trigger a JavaScript function upon the refresh of an update panel, but for some reason it's not working. Oddly enough, I'm using the same approach that has worked for other functions. In C#, this is what I have in th ...

javascript.net

The combination of Firebase Storage's listAll() method and getDownloadURL() function is not functioning properly

I created a function in my utils file that is designed to find and retrieve the URLs of images stored within a specific folder on Firebase Storage. The folder path is "proj_name/screenshots/uid/" and it contains 8 images. I have imported this function into ...

javascriptfirebasenext.jsfirebase-storage

Guide to handling URL errors in a form using AngularJS

I'm currently working on implementing URL validation for my form. The validation itself is working properly, but I've encountered an issue. Previously, I had validation set up so that an error message would display when submitting the form with e ...

javascriptangularjsformsform-submit

Is it possible to exclusively utilize Bootstrap 4 (excluding react-bootstrap) within my React application?

Is it a bad idea to combine jQuery and React? I came across some information suggesting that they may not work well together. Is this true? ...

reactjstwitter-bootstrap-3bootstrap-4

Ways to trigger an event based on the outcome of a pop-up window

In my current project, I am working on a component that includes three buttons: two default options and an additional modal dialog option for more advanced choices. When one of the default buttons is clicked, the component emits an event based on the selec ...

angularangular-material

Is there a way to determine if a browser supports the offline event?

I attempted to implement the code from this Stack Overflow question: How can I check for support of the `focusin` event? However, in Chromium, the method hasEvent('offline') returns false even though it supports the `offline` event. Does anyone ...

javascripthtmldom-events

Issue detected: The validation form is encountering errors due to a blank textarea when utilizing jQuery validate and AJAX for

I am currently working on a spring project that involves registering comments on a specific system design. The page layout for this task is as follows: <form id="formularioCadastroComentario" role="form" method="POST" class="form-horizontal"> &l ...

javascriptjqueryajaxjquery-validate

Is there a way to receive messages from background.js of a Chrome Extension within an Angular web application?

I've developed a Chrome Extension that sends messages to all tabs (through background.js) using the following code: chrome.tabs.query({}).then((tabs)=> { if (tabs) { tabs.forEach(tab => { chrome.tabs.sendM ...

angulargoogle-chrome-extension

Problem with memory management in ThreeJS

After developing a ThreeJS app using the canvas renderer to meet project requirements, I encountered a memory and garbage collection issue. As part of the application logic, numerous meshes are created for animations on sections of a flat 2D donut or ring ...

javascriptgarbage-collectionthree.js

Full-screen and auto-cropping capabilities are featured in the Bootstrap 4 carousel design

Is there a way to make full-width images in the bootstrap 4 carousel cropped based on position: center, background: cover to prevent scrolling issues? I attempted to follow advice from this webpage but encountered stretching and scroll-bar problems with d ...

htmlcssbootstrap-4

When publishing, TypeScript-compiled JS files fail to be included, even though they are included during the build process in Debug and Release modes

My .NET MAUI project includes TypeScript files in the Scripts\scriptfiles.ts folder, which are compiled into wwwroot\js\scriptfiles.js. Everything functions properly until my client attempts to publish it, at which point all script files go ...

.nettypescriptmsbuildmauipublish

React and SASS - issue with checkbox component not being properly aligned with its label

I'm brand new to React and I'm currently in the process of converting a pure HTML page into a React component. How can I adjust the SASS stylesheet to match the original HTML layout? Here is my current React setup (the checkbox displays on the r ...

javascripthtmlcssreactjssass