JSFiddle - React, Tailwind, and code Playground

by heeehong

HTML

<link rel="stylesheet" href="code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
생일 <i class="fas fa-exclamation-circle" title="생일 입력하면 생일 쿠폰 발행해 드립니다." style="cursor:pointer;" aria-hidden="true"></i>
<br>
<input type="text" size="10">

CSS

.ui-tooltip {
    padding: 10px 20px;
    color: #fff;
    border-radius: 5px;
    background:#000;
}

input[type=text] {height:30px;line-height:30px;border-radius:4px;border:1px solid #ddd;margin-top:10px;}

JavaScript

$(function() {
        $(".fa-exclamation-circle").tooltip();
    });