draw an arrow inside table cell using CSS

Question

Some of my table cells have really large amounts of content. I don't want to display all of them until the user hovers on the cell, but I want to put a arrow in the corner to indicate it can be hovered - just like in the excel comment. How can I do this using CSS?

an arrow in the corner indicating can be hovered

@MrLister I'm using a tool-tip plugin, but honestly, I've tried a few, but they're all not ideal. Reasons are 1). the extra content contains style markups 2). the extra content can be really large and the tool-tip positioned really weird. 3). tool-tips are not selectable. I welcome any better alternatives than tool-tip. — Sawyer, Aug 21 '13 at 14:37
You could use a data-attribute if you wanted and display it with a pseudo element... That might be cool. I think I have an example somewhere -- goes to my previous answers... Edit: Found it -- http://stackoverflow.com/a/17819100/1150613 — brbcoding, Aug 21 '13 at 14:39
I think this is a much more interesting issue than the little red arrow... — Mr Lister, Aug 21 '13 at 14:42

brbcoding · Accepted Answer · 2013-09-03T22:57:07.753

10

Using CSS Shapes and pseudo-elements:

HTML

<table>
    <tr><td class="comment">Foo</td></tr>
</table>

CSS

* { 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;
}

DEMO

Updated answer to fix wrapping:

/* add relative positioning to the td */
td { border: 1px solid black; position: relative; }
/* and absolute positioning for the triangle */

.comment:after {
    content: "";
    position: absolute;
    /* left: calc(100% - 0.5em); */
    /* use right: 0; instead */
    right: 0;
    top: 0;
    border-left: 0.5em solid transparent;
    border-top: 0.5em solid red;
}

Fixed Demo

edited Sep 03 '13 at 22:57

answered Aug 21 '13 at 14:29

brbcoding

13,378
2
37
51

Actually I got a minor problem with this answer, when the text wraps in the cell, the arrow instead of staying at the upper right corner of the cell, it appears at the upper of the last word. I moved the arrow to the left upper corner as a workaround. – Sawyer Aug 21 '13 at 15:15
2

Need to notice that absolute positioning in the table cell with `position:relative` [doesn't work in Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=63895). So an extra wrapper with `display: block; position: relative` may be needed to make this solution cross-browser. – Ilya Streltsyn Aug 21 '13 at 15:45

score 2 · Answer 2 · answered Aug 21 '13 at 14:27

2

You can use CSS shapes and absolute positioning to accomplish this.

Here's a fiddle: 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;
}

answered Aug 21 '13 at 14:27

tomaroo

2,524
1
19
22

That tick is in the top right of the window and not the cell for me. (FF22, Linux) – Cobra_Fast Aug 21 '13 at 14:28
@Cobra_Fast - You have to have the `position: relative` on the `td`, otherwise the span will go to the next parent that's not static, or the window itself. – Shauna Aug 21 '13 at 14:30
@Shauna I'm talking about the fiddle linked. – Cobra_Fast Aug 21 '13 at 14:31
`position: relative` is on the `td`? – tomaroo Aug 21 '13 at 14:31
2

@Cobra_Fast - You're right. It seems to be [a known issue](http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements) (at least among SO users). You can work around it by putting a `div` inside the `td` and setting `position: relative` on the `div` instead of the `td`. – Shauna Aug 21 '13 at 14:36
@tomaroo which browsers did you test with? The arrow is outside the table cell in SeaMonkey; inside with Konqueror though. – Mr Lister Aug 21 '13 at 14:36
@MrLister - That seems to be a Gecko thing. SeaMonkey and Firefox both use Gecko, while Konqueror uses KHTML. – Shauna Aug 21 '13 at 14:37
@Shauna Yes. Still I think brbcoding's answer is better than tomaroo's, as it doesn't need a workaround in the form of extra markup. – Mr Lister Aug 21 '13 at 14:38
Here are the bug reports for [table cells proper](https://bugzilla.mozilla.org/show_bug.cgi?id=35168) and [blocks with `display: table-cell` on them](https://bugzilla.mozilla.org/show_bug.cgi?id=741133) – Shauna Aug 21 '13 at 14:40

score 1 · Answer 3 · edited Aug 21 '13 at 14:40

1

Just replace 100 with your width and height, and add a position in a right place

.triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

edited Aug 21 '13 at 14:40

Mansfield

14,445
18
76
112

answered Aug 21 '13 at 14:24

Yulia Puchnina

11
1

score 0 · Answer 4 · answered Jan 04 '16 at 14:46

I found another solution compatible for all browsers --- Tested.

          .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>

draw an arrow inside table cell using CSS

4 Answers4

Linked

Related