--- id: 587d7faa367417b2b2512bd6 title: Agrega un cuadro emergente a un elemento D3 challengeType: 6 forumTopicId: 301470 dashedName: add-a-tooltip-to-a-d3-element --- # --description-- Un cuadro emergente muestra más información acerca de un elemento en la página cuando el usuario se coloca sobre ese elemento. Hay varias formas de agregar un cuadro emergente a una visualización, este desafío usa el elemento SVG `title`. `title` se empareja con el método `text()` para agregar datos dinámicamente a las barras. # --instructions-- Añade un elemento `title` debajo de cada nodo `rect`. Luego llama al método `text()` con una función callback para que el texto muestre el valor de los datos. # --hints-- Tu código debe tener 9 elementos `title`. ```js assert($('title').length == 9); ``` El primer elemento `title` debe tener un cuadro emergente de texto de `12`. ```js assert($('title').eq(0).text() == '12'); ``` El segundo elemento `title` debe tener un cuadro emergente de texto de `31`. ```js assert($('title').eq(1).text() == '31'); ``` El tercer elemento `title` debe tener un cuadro emergente de texto de `22`. ```js assert($('title').eq(2).text() == '22'); ``` El cuarto elemento `title` debe tener un cuadro emergente de texto de `17`. ```js assert($('title').eq(3).text() == '17'); ``` El quinto elemento `title` debe tener un cuadro emergente de texto de `25`. ```js assert($('title').eq(4).text() == '25'); ``` El sexto elemento `title` debe tener un cuadro emergente de texto de `18`. ```js assert($('title').eq(5).text() == '18'); ``` El séptimo elemento `title` debe tener un cuadro emergente de texto de `29`. ```js assert($('title').eq(6).text() == '29'); ``` El octavo elemento `title` debe tener un cuadro emergente de texto de `14`. ```js assert($('title').eq(7).text() == '14'); ``` El noveno elemento `title` debe tener un cuadro emergente de texto de `9`. ```js assert($('title').eq(8).text() == '9'); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```