Javascript-форум - подсказка для строки таблицы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - подсказка для строки таблицы (https://javascript.ru/forum/dom-window/41052-podskazka-dlya-stroki-tablicy.html)

подсказка для строки таблицы

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

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

Цитата:

Сообщение от animhotep (Сообщение 269929)

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

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

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

Цитата:

Сообщение от animhotep (Сообщение 269935)

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

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

<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) - под выбранной строкой появляется пустая строка.

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

Цитата:

Сообщение от animhotep (Сообщение 270081)

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

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

Прошу прощения, не понял как на 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>

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

Цитата:

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

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

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

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

Цитата:

Сообщение от animhotep (Сообщение 270106)

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

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

Цитата:

Сообщение от animhotep (Сообщение 270106)

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

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