CODEWITHSUNDEEP
htmlcss
user3033194
user3033194

Reputation: 1821

Show tooltip when hovering over table cell border

I am trying to show a tooltip when the user hovers over the left border of the first td cell. My code is given below (JSFiddle here):

HTML

<table class="cart"> 
    <tr> 
        <th id="pos">Pos</th> 
        <th id="name">Product</th> 
        <th id="price">Price</th> 
    </tr> 
    <tbody> 
        <tr>
            <td>
              <span>New visual experience!</span>
            </td>
            <td>
                1
            </td>
            <td>19.99</td>
        </tr>
        <tr>
            <td>
              <span>Inject music directly into your ears!</span>
            </td>
            <td>
                2
            </td>
            <td>19.99</td>
        </tr>
    </tbody> 
</table>

CSS

table tr td{
    border: 1px solid blue;
}
.cart { width: 100%; }

td span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
    cursor: arrow;
}

td:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
    cursor: pointer;
}

I have tried many ways, but the tooltip keeps appearing over the entire cell, and not over the left border like I want it. Can someone help please?

Upvotes: 1

Views: 5254

Answers (1)

Jake Zeitz
Jake Zeitz

Reputation: 2564

I would add an absolutely positioned div with a width the size of the border (or slightly bigger) inside of the first <td> then use that to listen for the hover event.

https://jsfiddle.net/x1c3hxyx/4/

Upvotes: 1

Related Questions