Hi there, I've created a table and added a tooltip using CSS.
The tooltip appears when you hover over the <td> elements.
If you're interested, here's the link to my JSFiddle: www.jsfiddle.net/4qzurb5w/
I'm wondering how I can make this tooltip display across the entire table at all times. Any suggestions?
Remove the conflicting block below:
.green:hover,
.blue:hover,
.red:hover,
.yellow:hover,
.black:hover {
opacity: 0.8;
}
After removing that block, everything should work fine.
The opacity style has been shifted to .tooltip .tooltiptext, as shown in the stack snippet below.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
opacity: 0.8; /* <-- Opacity added here */
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* Other relevant CSS styles below this line */
<table>
<tbody>
<tr>
<td style="vertical-align: middle; min-width: 50px !important; font-weight: bold;">FLOOR 1 </td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align: top;">
</td>
</tr>
<tr>
<td class="red tooltip">Apartment No:1
<div><span class="tooltiptext">Some Data<br>More Data<br>Even More Data<br></span></div>
</td>
</tr>
/* Additional table rows and data structures go here */
</tbody>
</table>
</td>
/* Additional table columns with data here */
</tr>
</tbody>
</table>I'm currently working on a layout that involves organizing elements into 3 columns using Bootstrap 4.5. The center column will contain a lengthy body of text. Within the right column, there are two divs, one of which should be fixed either to the to ...
This is my first time working with PHP. I have successfully loaded some items on my page, and now when I click on an item, I want to display more information about it. Below is the code for connecting to the database: <?php $servername = "localhost:330 ...
My current project at work involves working on an ASP.NET MVC application. My browser of choice is Internet Explorer, although I can't recall the exact version, and my work machine runs on 32-bit Windows 7. Within one of the view pages, there is a dr ...
Specifics I am aiming to generate a map based on any address stored within my <span> The address in question is : 410 walker street Lowell MA 01851 The <span> containing the address reads as follows: Address: <span id="address" > 410 w ...
Everything in the code I've typed seems fine, but I'm curious about how to separate each word I search for with a ;. This is the code I have: <!DOCTYPE html> <html> <title>W3.JS</title> <meta charset="utf-8"> <l ...
I am in need of a solution where I can trigger a button within the ng-repeat loop and focus on a textarea specific to that item in the loop. HTML <div ng-repeat="item in items"> <textarea focus-when="showTextarea">{{ item }}</textarea> ...
We are working on developing an app using PhoneGap, Angular JS, and Onsen. One issue we are facing is that we are unable to center the header in a modal. The code snippet is provided below: <ons-modal var="modalVariable"> <ons-navigator var"de ...
I'm looking to style the dropdownlist to display two field columns similar to the image shown. Is it possible to achieve this using HTML5 datalist or jquery? ...
Is there a way to adjust this script to change the box-shadow color of #player1? <script type="text/javascript> $(window).ready(function(){ var sourceImage = document.getElementById("art"); var colorThief = new ColorThief(); var color = ...
I'm currently working on integrating a form into my app for users to create tasks. This form should only appear the first time a user attempts to create a task. As someone who is not very experienced with frontend development, I find myself wondering ...
When attempting to modify data in the database for a specific user column, I encountered an issue. The code that I created only alters the data for the last user in the database, rather than the current user. For instance: Let's say I am logged in as ...
There is a dilemma that only those in the world of web development will understand. Beware! I have envisioned a layout for a website I am constructing. The concept involves tilted <hr/> elements on the page, with text wrapping around them (refer to ...
Similar Question: How to change an input button image using CSS? Can I create a form with two image submit buttons? I am working on a language selection page that displays two flags (.png's) and I would like it so that when a user clicks on a fl ...
If you're unsure about my explanation, check out the video for a visual demonstration. Pay close attention to the cursor movements while I attempt to optimize my website for IE8. Hopefully there is a solution to this issue. Thank you in advance! http ...
Here's the code I've been working on: #footer { font-size: 10px; position:absolute; bottom:0; background:#ffffff; } I'm facing an issue with this code - can anyone offer some assistance? UPDATE: To clarify the issue further: T ...
I have a question regarding sending emails through PHP. How can I include PHP arrays in the message section of an email? Here is a simple array that I created and attempted to include in the email, but it seems incorrect as I couldn't find any releva ...
I needed to display a one-dimensional array in a 2D grid format with 3 rows and 3 columns. The array itself contains numbers from 1 to 9. const array = Array.from({ length: 9 }, (_, i) => i + 1); In my React component, I have it rendering as a series o ...
For my latest project, I decided to create a web page using Cards in React. To achieve this, I utilized React Bootstrap for the card components. However, I encountered an issue with setting the flex property. Below is a snippet of my component: import &ap ...
Currently delving into the world of Angular.js, I have encountered a simple problem that has left me baffled. My objective is to generate form inputs with the value of "connectedTeams" in HTML: <input type="text" name="connectedTeam[]"> <input ...
Despite my reputation, I have a question that is causing me some confusion. I am trying to create a reactive form using an example on Stackblitz. While everything seems fine in Stackblitz and the code works correctly there, I encounter an error in VS Code ...