Форум

Euler · #1 (**permalink**) 29.08.2013, 18:29

Доброго времени суток. Задача следующая - есть узкая(350px) таблица с множеством(~50) строк. Нужно чтобы при наведении на строку, справа от неё появлялась небольшая панель с подсказкой. Я пробовал использовать tooltip из jquery, но слишком нестабильно - либо перекрывает текст в таблице, либо постоянно перерисовывается, иногда застревает... Поэтому решил, что нужно выносить подсказку за пределы таблицы и привязывать к краю строки.

animhotep · #2 (**permalink**) 29.08.2013, 18:36

мы рады за тебя, но в чём вопрос?

Euler · #3 (**permalink**) 29.08.2013, 18:43

Сообщение от animhotep

мы рады за тебя, но в чём вопрос?

как реализовать всплывающую подсказку справа от элемента(в моём случае строки <tr>).

animhotep · #4 (**permalink**) 29.08.2013, 18:53

или руками или взять готовое решение, это например

Euler · #5 (**permalink**) 30.08.2013, 15:14

Сообщение от animhotep

или руками или взять готовое решение, это например

Увы, "руками" для меня слишком расплывчатое объяснение

.
Со вторым вариантом тоже не срослось:

<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<script src="jquery-1.9.1.js"></script>
<script src="bootstrap.js"></script>
<script type="text/javascript">
$(function () {
        $("[rel='tooltip']").tooltip({ placement: 'right' });
    });
</script>
<body>
<table width="800" border="1">
  <tr data-original-title="заголовок" rel="tooltip">
    <th width="250" scope="col">01</th>
    <th width="275" scope="col">02</th>
    <th width="253" scope="col">03</th>
  </tr>
  <tr data-original-title="строка №1" rel="tooltip">
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr data-original-title="строка №2" rel="tooltip">
    <td>21</td>
    <td>22</td>
    <td>23</td>
</table>
</body>
</html>

tooltip "ломает" таблицу(последний FireFox) - под выбранной строкой появляется пустая строка.

animhotep · #6 (**permalink**) 30.08.2013, 15:22

а стили (css) не пробовали подключать?
http://codepen.io/animhotep/pen/eDEwL

Euler · #7 (**permalink**) 30.08.2013, 15:39

Сообщение от animhotep

а стили (css) не пробовали подключать?
http://codepen.io/animhotep/pen/eDEwL

Вот оно что, спасибо огромное.

Euler · #8 (**permalink**) 30.08.2013, 16:27

Прошу прощения, не понял как на codepen.io сохранять свой результат. Обнаружился баг:

<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table width="800" border="1">
  <tr data-original-title="заголовок" rel="tooltip">
    <th width="250" scope="col">01</th>
    <th width="275" scope="col">02</th>
    <th width="253" scope="col">03</th>
  </tr>
  <tr data-original-title="строка №1" rel="tooltip">
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr data-original-title="строка №2" rel="tooltip">
    <td>21</td>
    <td>22</td>
    <td><input type='button' value='inactive button' disabled=true></td> 
</table>
</body>
</html>

неактивная кнопка неправильно обрабатывается, при наведении на неё подсказка не появляется и в тоже время не убирается, если уже показана. Т. о. можно наплодить очень много подсказок, перекрывающих друг друга.

animhotep · #9 (**permalink**) 30.08.2013, 16:48

Сообщение от Euler

не понял как на codepen.io сохранять свой результат

ну там есть кнопка Save сверху))

и нормально всё с кнопкой http://codepen.io/animhotep/pen/uIipl

Euler · #10 (**permalink**) 30.08.2013, 17:48

Сообщение от animhotep

ну там есть кнопка Save сверху))

Наверно нужно зарегистрироваться

.

Сообщение от animhotep

и нормально всё с кнопкой http://codepen.io/animhotep/pen/uIipl

Проверил в хроме и фф - нет подсказки. Не так чтобы это было очень серьёзной проблемой, просто интересно можно ли заставить работать именно с кнопкой.

Форум

Справочник

Discord чат

Курсы javascript