Как отобразить всплывающую подсказку в файле HTML?

0

Я новичок в HTML, и я был бы признателен за вашу помощь.

В данной таблице, которую я сделал в HTML, я хотел бы установить некоторые подсказки в некоторых ячейках.

a) Это возможно? Если да - как?

b) Означает ли это, что я должен использовать веб-сервер или java-скрипт? Моя миссия - отобразить HTML-страницу в браузере, но нет веб-сервера, и я не могу установить веб-сервер. Все отображаемые данные находятся в самом файле, и я хотел бы сохранить его простым.

спасибо

  • 0
    возможный дубликат Как добавить всплывающую подсказку в div
  • 0
    что вы пробовали? любой пример кода или что-то, есть несколько способов сделать это, это зависит от вашего HTML CSS и данных, либо его динамического или статического и т. д. и также зависит от таких событий, как зависание, щелчок и т. д., пожалуйста, уточните, что именно вы хотите достигать
Показать ещё 1 комментарий
Теги:
webserver

6 ответов

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

а. Вы можете просто добавить атрибут title в элемент td. Затем, когда вы наведете указатель на ячейку таблицы, у вас появится всплывающая подсказка.

<td title='I am a tooltip'> My Text</td>

Дополнительная информация: http://www.w3schools.com/tags/att_global_title.asp

б. Нет, вам не нужно настраивать веб-сервер

Поделиться
0

Простое решение css:

[HTML]

<table>
  <tr><td data-tooltip="I am cell 1">cell 1</td></tr>
  <tr><td data-tooltip="I am cell 2">cell 2</td></tr>
  <tr><td>no tooltip</td></tr>
</table>

[CSS]

[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    border: 1px solid #ddd;
    background: #fff;
    position: absolute;
    padding: 3px;
    margin-top: 0.5em;
}

См. Этот jsbin

Поделиться
0

Если вы хотите использовать jQuery, вы можете попробовать это для каждого td:

$(function(){ // doc ready
   $('table').find('td').each(function(){
       $(this).attr('title', $(this).text());
   });
});

Этот код пропускает все ваши tds, доступные в вашей таблице, и затем устанавливает их текст как заголовок, который отображается как всплывающая подсказка.

демонстрация

Заметка:

Этот код не требует, чтобы какой-либо веб-сервер работал, но сначала вы должны иметь ссылку на библиотеку jQuery.

Поделиться
0

Вы можете использовать атрибут title

<td title="Hey there">
Поделиться
0

Вот я сделал для тебя скрипку :)

http://fiddle.jshell.net/B2Cr9/

HTML:

<table>
    <tr>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
    </tr>
    <tr>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
    </tr>
</table>

CSS:

.has-tootltip {
    display:inline-block;
    position:relative;
    background-color:green;
}
.tooltip {
    display:none;
    position:absolute;
    left: 0;
    top: 100%;
    width: 300px;
    min-height:40px;
    z-index:10;
    background-color: yellow;
}
.has-tootltip:hover .tooltip {
    display: block;
}
Поделиться
0

просто добавьте атрибут title:

<input type="button" title="click me"/>
Поделиться

Ещё вопросы

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