JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">
<p><a href="#" title="<span class='red'>This is a <a href='#'>link</a></sp an>">Tooltips</a>can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<input type='button' tooltop='123' value="HEJ" title='123' class='myLinkButton' />

CSS

label {
      display: inline-block;
      width: 5em;
  }
  .red {
      color: red;
  }
}

JavaScript

$(document).ready(function () {
    $(".myLinkButton").each(function () {
        createlink(this);
    });
});

function createlink(obj) {
    var ids = $(obj).attr('title');
    var linkHtml = "<a href='javascript:alert(" + ids + ")'>link</a>"
    $(obj).attr('title', linkHtml);

}

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null,
        close: function (event, ui) {
            ui.tooltip.hover(

            function () {
                $(this).stop(true).fadeTo(400, 1);
            },

            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
        }
    });
});