--- id: 587d7faa367417b2b2512bd6 title: Додавання до елементу D3 спливаючої підказки challengeType: 6 forumTopicId: 301470 dashedName: add-a-tooltip-to-a-d3-element --- # --description-- Спливаюча підказка відображає розширену інформацію про елемент на сторінці при наведенні на неї курсору миші. Є декілька способів додати спливаючу підказку до візуалізації, для цього завдання використовується елемент SVG `title`. `title` працює у парі з методом `text()`, щоб динамічно додавати дані до стовпців. # --instructions-- Додайте елемент `title` під кожен вузол `rect`. Потім застосуйте метод `text()` з функцією зворотнього зв'язку, щоб текст відображав значення даних. # --hints-- У Вашому коді має бути 9 елементів `title`. ```js assert($('title').length == 9); ``` Перший елемент `title` має містити текст підказки `12`. ```js assert($('title').eq(0).text() == '12'); ``` Другий елемент `title` має містити текст підказки `31`. ```js assert($('title').eq(1).text() == '31'); ``` Третій елемент `title` має містити текст підказки `22`. ```js assert($('title').eq(2).text() == '22'); ``` Четвертий елемент `title` має містити текст підказки `17`. ```js assert($('title').eq(3).text() == '17'); ``` П'ятий елемент `title` має містити текст підказки `25`. ```js assert($('title').eq(4).text() == '25'); ``` Шостий елемент `title` має містити текст підказки `18`. ```js assert($('title').eq(5).text() == '18'); ``` Сьомий елемент `title` має містити текст підказки `29`. ```js assert($('title').eq(6).text() == '29'); ``` Восьмий елемент `title` має містити текст підказки `14`. ```js assert($('title').eq(7).text() == '14'); ``` Дев'ятий елемент `title` має містити текст підказки `9`. ```js assert($('title').eq(8).text() == '9'); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```