JSFiddle - React, Tailwind, and code Playground

by Manjula Dhamodharan

HTML

<link rel="stylesheet" href="https://rawgit.com/enyo/opentip/master/css/opentip.css">
<script src="https://rawgit.com/enyo/opentip/master/downloads/opentip-jquery.js"></script>
<div class="postbottom">
    <div class="email" style="width:13%;float:right;position:relative;">
        <input type="checkbox" style="padding: 10px 0px 0px 22px;margin: 0px 0px 0px 18px;" />
        <label style="padding:10px 0px 0px 10px;">Email</label>
        <img id="tooltip2" src="images/i1.PNG" data-ot="You can also use this feature in our Advanced  Email App for more comfortable" data-ot-delay="1" data-ot-hide-trigger-effect="fade" data-ot-style="alert" data-ot-fixed="true" width="20px" height="20px" ; />
    </div>
    <div class="sms" style="width:13%;float:right;">
        <input type="checkbox" style="padding: 10px 0px 0px 22px;margin: 0px 0px 0px 18px;" />
        <label style="padding:10px 0px 0px 10px;">SMS</label>
        <img id="tooltip1" src="images/i1.PNG" data-ot="You can also use this feature in our Advanced  SMS App for more comfortable" data-ot-delay="1" data-ot-hide-trigger="closeButton" data-ot-style="standard" data-ot-fixed="true" width="20px" height="20px" ; />
    </div>
</div>

CSS

.postbottom {
    width: 600px;
    border: 1px solid #ccc;
    height: 41px;
    margin: 0 auto;
    background:#dadfe1;
}
.sms {
    padding: 13px 0px 0px 400px;
    margin: -1px 4px -4px -5px !important;
}
.email {
    padding: 13px 0px 0px 10px;
    margin: -1px 4px -4px -5px !important;
}

JavaScript

$('textarea').on('mouseenter', function () {
    setTimeout(function () {
        $('.ot-close').trigger('click');
    }, 2000);
});