Отображение текста при наведении курсора - Элемент заголовка не соответствует, атрибут заголовка ничего не делает

Question

Я пытаюсь сделать что-то похожее на это (отображать немного текста, когда пользователь наводит курсор на элемент). Вот фрагмент HTML-кода, который генерирует мой скрипт:

<svg width="400" height="400">
  <rect x="100" y="100" width="40" height="45" fill="darkred">
    <title>Some_Text, 50, 20.09%</title>
  </rect>
</svg>

При наведении указателя мыши на мои участки не появляется ничего, что не согласуется, так как текст появляется при наведении указателя мыши на указанную выше ссылку. Я также попытался изменить элемент title внутри прямоугольника на атрибут title, но это не решило проблему. Как это исправить?

В конце я хочу, чтобы текст отображался при наведении курсора на определенные элементы. Есть ли более последовательный способ сделать это? Я бы предпочел простой способ, ничего особенного, так как это небольшая функция, и я обычно не касаюсь HTML.

Спасибо!

Обновление: я использую twistd (python) для обслуживания HTML. Когда я сохраняю его и снова открываю сохраненный html через chrome, он работает как надо. Похоже, что-то происходит с Twistd.

Answer 1

Я сделал быстрый тест на jsFiddle, кажется, работает для меня в Chrome?

http://jsfiddle.net/bnUDE/1/

Предполагается, что вы ищете текст, который появится, когда пользователь наводит курсор на прямоугольник? В моем случае Top, Middle и Bottom Box в зависимости от коробки.