JSFiddle - React, Tailwind, and code Playground

by alkos333

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<span data-pm-type="tooltip-info">X</span>
<span data-pm-type="tooltip-content">
    Tooltip content
</span>

JavaScript

$(document)
                .tooltip({
                    position: {
                        my: "center bottom-7",
                        at: "center top",
                        using: function (position, feedback) {
                            $(this)
                                .css(position)
                                .addClass("rounded-all-small");

                            $("<div>")
                            .addClass("arrow")
                            .addClass(feedback.vertical)
                            .addClass(feedback.horizontal)
                            .appendTo(this);

                        }
                    },
                    items: '[data-pm-type="tooltip-info"]',
                    content: function () {
                        var element = $(this),
                            content = element.find('[data-pm-type="tooltip-content"]').html();

                        return content;
                    },
                    create: function (event, ui) {
                        var element = $(this),
                            content = element.find('[data-pm-type="tooltip-content"]').remove();
                    }
                });