Как сделать всплывающую подсказку в React?

Question

[Alexander Shtang]

Давайте допустим, есть такой код:

var someVariable = React.createClass({
render: function() {
                    return React.createElement('div', {className: 'drivers-shifts'},[
                        React.createElement(Hsvg, {href: 'car', cssClass: "car-md car-icon"}),
                        React.createElement('h2', {className:'margin'}, this.state.values.free),
                        React.createElement(Hsvg, {href: 'driver', cssClass: "driver-md driver-icon"}),
                        React.createElement('h2', {className:'margin'}, this.state.values.onShift)]
                    )
                }
});

И вот к иконке svg мне нужно сделать всплывающую подсказку. Как? data-tooltip пробовал. Также пробовал это и вот это вот.

Но, опыта маловато, и не могу догнать как это сделать.

Comments

[Никита Гущин]

А что именно не получается?

[Никита Гущин]

wwayne.github.io/react-tooltip пример кода

[Alexander Shtang]

Никита Гущин:, да, это пример я видел. Но у меня часть элементов уже переписана на Реакт с помощью createClass И createElement (как в моём примере), но вдруг понадобилось сделать тултипы, и я что-то никак не соображу, как их туда интегрировать. Пример по ссылке ответа явного не даёт, потому я и пришёл к живым людям, а не к неживым туториалам.

Answer 1

[Alexander Shtang]

Решение оказалось в дополнительной вложенности:

React.createElement('div', {className: 'car-icon_wrap tooltips', 'data-tooltip': 'Свободные водители'},
                            React.createElement(Hsvg, {href: 'car-icon', cssClass: "car-md car-icon -online "})
                        ),
React.createElement('h2', {className:'margin'}, this.state.values.free),