I have a situation where certain cells in my table contain a lot of content. I would like to only display the content when the user hovers over the cell, and also add an arrow in the corner as a visual indicator, similar to Excel comments. Is there a way to achieve this using CSS?
Creating unique designs with CSS Shapes and pseudo-elements:
Embedding HTML
<table>
<tr><td class="comment">Foo</td></tr>
</table>
CSS Styling
* { margin: 0; padding: 0;}
td { border: 1px solid black; }
.comment:after {
content: "";
position: relative;
top: 0.5em;
border-left: 0.5em solid transparent;
border-top: 0.5em solid red;
}
Revised approach to resolve wrapping issues:
/* add relative positioning to the td */
td { border: 1px solid black; position: relative; }
/* utilize absolute positioning for the triangle */
.comment:after {
content: "";
position: absolute;
/* left: calc(100% - 0.5em); */
/* prefer right: 0; instead */
right: 0;
top: 0;
border-left: 0.5em solid transparent;
border-top: 0.5em solid red;
}
To achieve this, you can utilize CSS shapes combined with absolute positioning.
Check out this demo on JSFiddle: http://jsfiddle.net/pNmQg/
table td { position: relative; }
table td span.arrow {
position: absolute;
top: 0;
right: 0;
border-top: 5px solid red;
border-left: 5px solid transparent;
}
To customize the triangle shape, simply update the width and height values with your preferred dimensions, and adjust the positioning as needed
.custom-triangle {
width: 0;
height: 0;
border-top: 100px solid blue;
border-left: 100px solid transparent;
}
After thorough testing, I discovered a solution that is compatible with all browsers.
.arrow-right-1 {
position: absolute;
top: -1px;
right: -5px;
float: right;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
transform: rotate(45deg);
}
td {
border: solid 1px blue;
width: 220px;
height: 100px;
/* padding: 0px !important; */
/* vertical-align: top; */
position: relative;
}<table class="table">
<tbody>
<tr>
<td>
<div class="arrow-right-1"></div>you can increase or decrease the size td's width/height or can put more text
</td>
</tr>
</tbody>
</table>My Bootstrap 5 carousel contains simple cards. The issue I'm facing is that when a card has less text, its height becomes smaller and the carousel jumps while sliding. Is there a way to make all the cards in the carousel stretch to the same height as ...
My objective is to customize the opacity of label/icon and background in MUI Chip. I want the label & icon to have an opacity of 1, while the background should have an opacity of 0.0571. Technologies used in this project include React, TypeScript, Materia ...
I have successfully configured a css file for my Express ejs web app. All the styles are displaying correctly, paths are accurate, and everything is working perfectly. Within one of my ejs files, the structure looks like this: <%- include ("partials/h ...
I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...
Hey there, I'm having an issue with creating a separation effect for a circle. I've been using the box-shadow property like this: box-shadow: 0 1px 0 rgba(0,0,0,.2);. However, as you can see in the image, the shadow on the left and right sides is ...
In my Bootstrap 4 project, I have created a navbar with the brand logo centered and navlinks on both sides. However, when the screen size is reduced to a small size, the toggler button appears at the center right after the brand logo. I want the toggler bu ...
Is it possible to navigate through the files in a folder by using buttons like Next and Previous, and then display the file contents within a table cell? Below is my attempted output, which unfortunately isn't functioning as expected: View Sample Ou ...
I'm facing a dilemma with my Bootstrap template where my tagline overlaps all other content on the page. When I scroll down, the text lays over my logo and navbar, creating a messy look especially on smaller screens. Despite trying to adjust the z-in ...
Greetings to all who are taking the time to review this query! Everything seemed to be going well until I refreshed my code after making numerous changes, and then this issue arose: Dropdown menu lacking color: https://i.sstatic.net/3lz5a.png The color ...
Recently, I embarked on my journey to learn PHP and encountered a challenge in changing the color of a well. After some research, I stumbled upon this code snippet: .well.homefull{ background: rgba(0, 0, 0, 0.4); } The confusion arises when it comes ...
I have a requirement where I need to implement a link in a Table of Contents that, upon clicking, should replace the existing content of one div on a page with the content of another div on a different page. My goal is to accomplish this using only JavaScr ...
I am attempting to align text, generated dynamically, on the left side of some images that are positioned next to each other. The image on the far left should also be aligned to the left. .inline-attachments { display:inline; vertical-align:top; } ...
Struggling with my website layout design as I encountered an issue. The overall width of the layout is too excessive, and I want to introduce some margins on the sides for a better visual appeal. Although the responsive design works well originally, adding ...
My goal was to align the icon buttons with the dynamic table on their right side, but they are overflowing slightly instead. Desired look / Current appearance . Before sharing my code block, I experimented with various options: Adjusting padding, margin, ...
I am facing an issue while trying to incorporate this code into my initial Wordpress template. It seems that the libraries for Bootstrap and my custom styles are not functioning as expected. Here is the code snippet in question. Any insights would be great ...
My stylesheet doesn't seem to be applying properly. Initially, I had all my CSS in the same HTML file. Then I created a separate CSS file and copied all my styles onto that file, but now the styles are not being applied. I have already checked for sy ...
As I delve into learning Sass, I am grappling with sorting out my workflow. The issue lies in the fact that my CSS files often contain PHP code for tasks such as autoversioning and defining path variables. Is there a way to exclude PHP code from SASS (SCSS ...
https://i.sstatic.net/8ulvX.png Yellow is currently the color of <li> elements that are children of <ul>. However, if I apply either a float or display property to the <li> or <ul>, the appearance changes. https://i.sstatic.net/lP ...
On my HTML game website, I feature multiple UL lists at the bottom of each page: <h2>How to play?</h2> <ul> <li><a href="/en/ws/google">Via Google</a></li> <li><a href="/en/ws/apple ...
I am currently working on a PHP website project. I have implemented the include function in my main page to include other files, but I am facing an issue with the CSS when loading the main page. The CSS in the included files seems to be all messed up, maki ...