Показывать подсказку при наведении

0

Скрипт: http://jsfiddle.net/G38nx/

Итак, у меня есть эта таблица. Я хочу показать всплывающую подсказку при переходе по определенному td. Например, указывая на ячейку со значением 27, следует показать всплывающую подсказку "160 см: 70 кг".

Любой простой способ сделать это?

<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: '\00a0';  
    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();
  • 3
    <td title="info goes here">
  • 0
    Всплывающая подсказка, как в jQueryUI, или простая подсказка заголовка?
Показать ещё 1 комментарий
Теги:

2 ответа

1
Лучший ответ

Здесь вы можете создать заголовки. С этой точки довольно просто применить jQueryUI Tooltips, которые позволяют настраивать стиль.

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();
});

Обновление. В вашем комментарии здесь приведен пример с изображением и мгновенным (без перехода) шоу и скрыть:

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

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

Вам нужно будет использовать атрибут data для указания изображений для каждой ячейки, например:

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

... а потом:

$(this).tooltip({
    content: $(this).attr('data-img-src'),
    show: false,
    hide: false
});
Поделиться
  • 0
    Ответ обновлен, чтобы изменить порядок длины / веса.
  • 0
    Обновлен снова, чтобы восстановить функцию исправления Firefox.
Показать ещё 4 комментария
2

DEMO

HTML

<div id="uguu"></div>

JQuery

$("td").hover(function (e) {
    var idx = $(this).index();
    $("#uguu")
        .css("top", $(this).offset().top)
        .css("left", $(this).offset().left+40)
        .html($(this).siblings("th").text()+":"+$("table tr").first().find("th").eq(idx).text())
        .show();
}, function () {
    $("#uguu").hide();
});

CSS

#uguu {
    position:absolute;
    display:none;
    width:100px;
    height:20px;
    background-color:#cef;
    z-index:400;
    border:1px solid ecf;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню