Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
158
rated 0 times [  162] [ 4]  / answers: 1 / hits: 27863  / 11 Years ago, tue, november 12, 2013, 12:00:00

Fiddle:http://jsfiddle.net/G38nx/



So I have this table. I want to show a tooltip while rolling over certain td. For example pointing at cell with value 27 should show a tooltip 160cm:70kg.



Any easy way to do it?



<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>

<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>

<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>

<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>

<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>


CSS:



table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}

td, th, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}

td:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '0a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
tr:hover{
background-color: #ffa;
}
}


JS:



function firefoxFix() {

if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {

var tds = document.getElementsByTagName( 'td' );

for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class=ff-fix>' + tds[index].innerHTML + '</div>';
};

var style = '<style>'
+ 'td { padding: 0 !important; }'
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );

};

};

firefoxFix();

More From » jquery

 Answers
4

Here's how you might create the titles. It's fairly easy from that point to apply jQueryUI Tooltips, which allow custom styling.



http://jsfiddle.net/isherwood/G38nx/25



$('td').each(function () {
var myIndex = $(this).index() + 1;
var myTitle = $(this).closest('tr').find('th').text();
myTitle += :;
myTitle += $('tr:first-child th:nth-child(' + myIndex + ')').text();

$(this).attr('title', myTitle);

$(this).tooltip();
});


Update: Per your comment, here's an example with image content and instant (no transition) show and hide:



http://jsfiddle.net/isherwood/G38nx/31



$(this).tooltip({
content: <img src='http://placehold.it/50x50' />,
show: false,
hide: false
});


You'd have to use a data attribute to specify images for each cell, something like:



<th data-image-src=<img src='/images/myImage.jpg' />>...</th>


... and then:



$(this).tooltip({
content: $(this).attr('data-img-src'),
show: false,
hide: false
});

[#74328] Monday, November 11, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;