When the user hovers .tags I want the image at url https://i.stack.imgur.com/BTb0z.jpg (for example) to float to the right of the user's mouse pointer.
How can I do this purely in CSS?
I'd know how to do this in JavaScript, but don't even know if it's possible in CSS, let alone where to start.
I don't think appending an image to the cursor can be done with only CSS. But you can have the cursor itself be an image, check out https://css-tricks.com/almanac/properties/c/cursor/ for a explanation.
But for an image as cursor, you do this:
.class {
cursor: url(images/my-cursor.png), auto;
}
I have a little solution. I think that will work.
.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;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">
<img src="https://secure.gravatar.com/avatar/655f4cf189cbb2349e5bad3314c4f3bc?s=114&d=mm&r=g" alt="" />
</span>
</div>
In pure CSS it's tricky to track the mouse pointer.
As TazTheManiac points out you can set the cursor to an image, but browsers limit the size of the image (commonly 128x182px).
So re-working Harun's answer, which places the image next to the hovered element rather than next to the cursor, to be pure CSS gives:
.tags {
position: relative;
}
.tags:hover:after {
content: '';
position: absolute;
background-image: url(https://i.stack.imgur.com/BTb0z.jpg);
background-repeat: no-repeat;
left: 100%;
top: 0;
width: 1000px; /* These are just large enough to definitely */
height: 1000px; /* contain the image. Image could be any size. */
}
<table>
<tr>
<td>No action</td>
<td>No action</td>
<td>No action</td>
<td class="tags">Hover me!</td>
</tr>
<tr>
<td>No action</td>
<td>No action</td>
<td>No action</td>
<td class="tags">Hover me!</td>
</tr>
</table>
<!--table borders--><style>td{border:1px solid #999;padding:10px;}table{border-collapse:collapse;}</style>
Which worked for me.
Related
I have the following HTML table:
table th {
border: 1px solid black;
z-index: 1;
}
.a {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
background: white;
}
.b {
white-space: nowrap;
}
.a:hover {
overflow: visible;
z-index: 2;
}
.c {
background: green;
}
<table>
<tr>
<th class=a><span class=c>a very long text that overflows</span></th>
<th class=b>some other text that is very long and should only be partly obscured</th>
</tr>
</table>
What I want to accomplish is that the text in field a ("a very long text that overflows") becomes visible on hover. The table structure should not change.
And indeed it becomes visible, but the text that should be behind it (from field b) partly obscures it. The added span and z-indexes have also no effect. (Tested in Firefox and Chrome)
What I would like is that the text in field a becomes visible and obscures as much of field b as necessary.
Also available in JSFiddle: https://jsfiddle.net/tdn15kh8/7/
Add position: relative; to th that contains overflowing text:
table th {
border: 1px solid black;
z-index: 1;
}
.a {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
background: white;
position: relative;
}
.b {
white-space: nowrap;
}
.a:hover {
overflow: visible;
z-index: 2;
}
.c {
background: lightgreen;
padding-right: .5rem;
}
<table>
<tr>
<th class=a><span class=c>a very long text that overflows</span></th>
<th class=b>some other text that is very long and should only be partly obscured</th>
</tr>
</table>
Check this MDN article to understand stacking context.
For z-index to work, it need a position aswell.
.a:hover {
overflow: visible;
position: relative;
z-index: 2;
}
Fiddle example here
Add position: relative to the .a. The z-index need position:relative or absolute.
There is also data attribute solution, that let you pass text from data attribute to ::after pseudo-class. It looks like this:
table{width: 300px;}
table th{border: 1px solid black;z-index: 1;}
.a{max-width: 100px;overflow: hidden;white-space: nowrap;background: white;}
.b{white-space: nowrap;}
.c{position: relative;}
.a:hover{overflow: visible;}
.a:hover .c::after{content:attr(data-text); display: block;position: absolute; top: 0; left: 0; background: green;}
<table>
<tr>
<th class="a">
<span class="c" data-text="a very long text that overflows">a very long text that overflows</span>
</th>
<th class="b">some other text</th>
</tr>
</table>
I made a sprite with all our icon images as the same image repeats a lot and I didn't want it loading over and over.
Below is an example of the CSS code
#visa{background: url('sprite.png') -69px 0; left: 0; width: 87px; height: 36px;}
The Visa icon is visible in the table, but it's aligned to the left, I need it alighted center
<tr>
<td><p id="visa"></p></td>
<td><p>Visa</p></td>
<td><img src="ok.png"></td>
<td><img src="ok.png"></td>
</tr>
I've tried to align center the P tag and the td tag using
aligh:center and text-align:center; neither are working for me.
I tried some position classes but couldn't get it working, but i may not have been using it correctly.
there is other styling I'd like to do to the cell as well like padding top/bottom but I need to get this sorted first.
What can I try ?
here is JS fiddle
https://jsfiddle.net/dave5000/v4cgeo9z/
Try this:
#visa{
background: url('sprite.png');
background-size: 36px;
background-position: center;
left: 0;
width: 87px;
height: 36px;
}
Don't really know the sizes of your image, but I guess this will do the trick.
EDIT:
Sorry for the wrong info, I messed up with copying from my example..
How about this?
#visa{
background: url('sprite.png');
background-repeat: no-repeat;
background-position: center;
display: block;
left: 0;
width: 87px;
height: 36px;
}
EDIT 2:
After you added the demo, I was able to generate this solution:
Fiddler Demo
I removed the
left: 0;
and added the next css line:
display: inline-block;
My fiddler demo works for me, so let me know if it works for you as well
You can add margin-left: 30%; to your #visa { css. You can play around with the % to get the correct position, or even use px if you like.
th {
text-align: center!important;
}
thead > tr > th {
padding:20px!important;
background-color: #9fc5d0;
}
td {
text-align: center!important;
border: 1px solid #bdbdbd;
}
#visa {
background: url('http://www.davidstokes.com/1/payments/gg-sprite.png') -69px 0;
margin-left: 30%;
width: 87px;
height: 36px;
}
<table>
<thead>
<tr>
<th colspan="2" width="40%">Method</th>
<th width="20%">Deposit</th>
<th width="20%">Withdrawal</th>
</tr>
</thead>
<tbody>
<tr>
<td><p id="visa"></p></td>
<td>Visa</td>
<td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td>
<td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td>
</tr>
<tr>
<td><p id="visa"></p></td>
<td>Visa</td>
<td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td>
<td><img src="https://cdn0.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/32/ok.png"></td>
</tr>
</tbody>
</table>
Hope it helped
How open are you to using jQuery and plugins? Backstretch is a plugin that lets you set background images nicely, and works well with responsive design also. Here is a link, take a look it might be helpful!
http://www.jquery-backstretch.com/
If you can't use jQuery, what about the following:
<tr>
<td>
<p id="visa">
<img src="sprite.png" />
</p>
</td>
<td><p>Visa</p></td>
<td><img src="ok.png"></td>
<td><img src="ok.png"></td>
</tr>
#visa{
width: 87px;
height: 36px;
}
#visa img {
width: 87px;
height: 36px;
display: block;
margin: 0 auto;
}
I'm having some trouble with the positioning of tooltips on a column of data within a table, which itself is inside a vertical scrolling div. A little background for you...
Due to legacy issues which are beyond my control, the page I am developing has to be displayed through an iframe of fixed width and height. The data I need to display has about 12 columns, all of which are required to be displayed. One column will contain serial numbers, which sometimes end up overflowing the bounds of the cell. I've set the overflow of this column to show an ellipsis, and have added tooltips as described in the accepted answer to this question.
When the tooltips are added, it appears to take the distance from the top of the table to the hovered cell, and draw the tooltip that distance from the top of the parent div. This means that, when you scroll down through the div, the tooltips end up being drawn down below the bottom of the div.
I've created a jsFiddle which demonstrates this: http://jsfiddle.net/kuzxLwxe/4/
Here's my css:
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
overflow:hidden;
text-overflow:ellipsis;
}
.ColumnSerialNo {
width:81px;
}
.hasTooltip span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
}
.hasTooltip:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
}
And my html:
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">3119985815206<span>3119985815206</span></td>
</tr>
<tr>
<td class="hasTooltip">5665811486586<span>5665811486586</span></td>
</tr>
...
</tbody>
</table>
</div>
I'm using jQuery for other things within the same page, but so far haven't been able to come up with a solution with it. If you think the best way to fix this is by using JS or jQuery I'd love to see the result!
Thanks in advance
Change your HTML markup to take more control on overflow:
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
And in your CSS, remove overflow from td:
.ResultsTable th, .ResultsTable td {
border:1px solid black;
/* overflow: hidden; this line should delete */
text-overflow:ellipsis;
}
And new CSS:
.SerialNumberContainer {
position: relative;
z-index: 10;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.SerialNumberTooltip {
position: absolute;
top: 10px;
left: 2px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
}
.SerialNumberContainer:hover {
z-index: 20;
}
.SerialNumberContainer:hover .SerialNumberTooltip {
display: block;
}
JSFiddle Demo.
I need to add up-right triangle in a cell.
How to do this?
I tried to add span and icon inside span, but it goes awry
<span style="position: relative;float:right;top:-30px;">#Html.ImageContent("triangle_bonus.png", "")</span>
Using CSS Triangles:
You basically have a 0 height, 0 width element, and use the borders to construct the triangle. Because the line between borders (for example, between top and left) is diagonal, you can create nice looking, solid color triangles with it!
Here's an Example!
HTML:
<table border="1">
<tr>
<td class="note">Triangle!</td>
<td>No Triangle!</td>
</tr>
</table>
CSS:
td {
padding: 20px;
}
.note {
position: relative;
}
.note:after { /* Magic Happens Here!!! */
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f00;
} /* </magic> */
Advantages:
No Images! - Meaning, no extra request.
No Additional Markup! - Meaning, you don't litter your HTML with unsemantic markup.
Looks good on all sizes! - Because it renders in the browser, it would look perfect on any size and any resolution.
Disadvantages:
Depends on pseudo-elements - Meaning that lower versions of IE will not display the triangle. If it's critical, you can modify the CSS a bit, and use a <span> in your HTML, instead of relying on :after.
Found this question through Google and ran into issues, so I'll add this here despite the age of original post.
Madara's answer works in most browsers, and works anywhere outside of a table in all browsers. But as mentioned in the comments, the example doesn't work in Firefox.
There's a very old ticket in Bugzilla concerning position:absolute; not working in <td> elements.
The main solution is to add an inner <div>:
HTML:
<table border="1">
<tr>
<td><div class="note">Triangle!</div></td>
<td>No Triangle!</td>
</tr>
</table>
CSS:
td .note {
padding: 20px;
}
jsFiddle example
I did find that it was possible to achieve without an inner <div> but only when the <td> was empty, which probably doesn't help.
To do cell text inside div it good idea. but if you just put extra div for ARROW not for text. because it creates problem when td has given width and height and text stays on TOP with padding-top:20px;.
I found another solution and tested on All major browsers (eg: IF and FF as well)
.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: 160px;
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 of td's height or can put more text
</td>
</tr>
</tbody>
</table>
After some research, I couldn't find an answer to this question. There was this but it didn't really answer my question. I would like to "strikethrough" a complete HTML table row in CSS, not just the text in it. Is it at all possible? From the example that I linked, it seems tr styling doesn't even work in Firefox. (And anyway, text-decoration only applies on text afaik)
Oh yes, yes it is!
CSS:
table {
border-collapse: collapse;
}
td {
position: relative;
padding: 5px 10px;
}
tr.strikeout td:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
HTML:
<table>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr class="strikeout">
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
</table>
http://codepen.io/nericksx/pen/CKjbe
My answer (below) said that it is not possible. I was wrong, as pointed out by #NicoleMorganErickson. Please see her answer (and upvote it!) for how to do it. In short, you use :before pseudo-class to create an element that draws a border across the middle of the cell, above the content:
table { border-collapse:collapse } /* Ensure no space between cells */
tr.strikeout td { position:relative } /* Setup a new coordinate system */
tr.strikeout td:before { /* Create a new element that */
content: " "; /* …has no text content */
position: absolute; /* …is absolutely positioned */
left: 0; top: 50%; width: 100%; /* …with the top across the middle */
border-bottom: 1px solid #000; /* …and with a border on the top */
}
(original answer)
No, it is not possible using only CSS and your semantic table markup. As #JMCCreative suggests, it is possible visually using any number of ways to position a line over your row.
I would instead suggest using a combination of color, background-color, font-style:italic and/or text-decoration:line-through to make the entire row obviously different. (I'd personally strongly 'fade out' the text to a color much closer to the background than normal text and make it italic.)
tr {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
background-repeat: repeat-x;
background-position: 50% 50%;
}
I used http://www.patternify.com/ to generate the 1x1 image url.
Edit
In a recent Bootstrap 4.3 ServiceNow Angular.js project, I found myself having to make some changes, and instead used the following CSS, similar to the experience of Revoman:
tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
display: inline-block;
padding: 12px 10px;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
Original Post
I like Nicole Morgan Erickson's answer, but it might cause side effects if your implement his solution verbatim. I've add some small tweaks to keep this kosher, below... so that we're not globally modifying every table or every td with this CSS.
I also wanted a button on the row to strike out the row, but I didn't want to strike out the column with the button, for visibility sake. I just wanted to strike out the rest of the row. For this, I made it so that every column that wants to be capable of showing the strike out must declare such by also being marked with a class. In this iteration, you'd need to mark the table as strike-able, and also mark each td as strike-able; but you gain safety by not side effecting any non-strike-able tables, and you gain control of which columns to strike out.
CSS:
table.strike-able {
border-collapse: collapse;
}
table.strike-able tr td {
position: relative;
padding: 3px 2px;
}
table.strike-able tr th {
position: relative;
padding: 3px 2px;
}
table.strike-able tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
Usage:
<table class="strike-able" id="Medications" data-item-count="#Model.Medications.Count">
<tr>
<th>
Some Column
</th>
<th>
Command Column
</th>
</tr>
<tr class="strikeout">
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here (active)</td>
</tr>
<tr>
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here</td>
</tr>
</table>
Lastly, since I'm using this with Bootstrap, and treating the deletions as a dangerous thing to do, I've formatted the colors a little to match my use.
EDIT: As pointed out by #Mathieu M-Gosselin in the comments, this actually puts the line behind the text. That said, if your line is the same color as your text or you are using a small-ish font, this still works pretty well.
For what it's worth, here's a pretty effective way to do it in pure CSS without using pseudo elements. You can change the thickness of the strikethrough line by adjusting the background-size.
table {
border-collapse: collapse;
}
td {
width: 100px
}
.strikethrough {
background: repeating-linear-gradient(
180deg,
red 0%,
red 100%
);
background-size: 100% 2px;
background-position: center;
background-repeat: no-repeat;
}
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr class="strikethrough">
<td>Foo Strike</td>
<td>Bar Strike</td>
<td>Baz Strike</td>
</tr>
</table>
#NicoleMorganErickson, I like your answer, but I could not get the strikeout to affect only the applied row. Also, I needed it to be applied multiple rows so I modified your solution down into a single class.
CSS:
tr.strikeout td:before {
content: " ";
position: absolute;
display: inline-block;
padding: 5px 10px;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
http://codepen.io/anon/pen/AaFpu
Yes you can. In the first cell of the row you create a div containing a HR. Float the div to the left and specify its width as a % of its containing element, in this case the table cell. It'll stretch as wide as you want across the table cells in that row, even beyond the width of the table if you want.
This works for me:
<style>
.strikeThrough {
height:3px;
color:#ff0000;
background-color:#ff0000;
}
.strikeThroughDiv {
float:left;
width:920%;
position:relative;
top:18px;
border:none;
}
</style>
<table width="900" border="1" cellspacing="0" cellpadding="4">
<tr valign="bottom">
<td>
<div class="strikeThroughDiv"><hr class="strikeThrough"/></div>
One
</td>
<td>
<label for="one"></label>
<input type="text" name="one" id="one" />
</td>
<td>
<label for="list"></label>
<select name="list" id="list">
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three" selected>3</option>
</select>
</td>
<td>
Four
</td>
<td>
Five
</td>
</tr>
</table>
To control the width of your line you have to specify the width of the table cell containing the HR. For styling HR elements they say you shouldn't make it less than 3px in height.
Here's a very simple way that worked for me:
<table>
<tbody style="text-decoration: line-through">
-- Various table body stuff
</tbody> </table>
Not sure but it seems there were other answers mentioning simple and straightforward pure CSS solution...
#Ben Slade's answer is the closest of all, but still...
Just use text-decoration: line-through in your CSS! Add corresponding class and then use <tr class="strikethrough">!
.strikethrough {
text-decoration: line-through;
}
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="strikethrough">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>