JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body style="text-align:center; direction: rtl; font-family: Arial, Helvetica, sans-serif; padding: 80px 40px;">

<h2>דוגמא לבועית הערה</h2>

<p>
נהוג לסווג חברות לפי דירוג האשראי שלהן, אשר נקבע על ידי סוכנויות דירוג חיצוניות. מבחינים בין חברות "בדירוג השקעה" (דירוג BBB ומעלה), שסביר שיעמדו בהחזרי החוב, לבין חברות שאינן בדירוג השקעה, או אג"ח זבל (BB ומטה), <a id='tmp' href="#!" class="popup">(*)<span class="popuptext">דירוג אשראי לא נשמר לנצח. אם אג"ח קונצרנית מסוימת הונפקה בדירוג מקסימלי AAA, הדירוג שלה יכול רק לרדת, מה שיגרור כמובן ירידה במחיר שלה.</span></a> שקיים ספק לגבי יכולת ההחזר שלהן. מאחר שהסוג האחרון אינו ראוי למאכל אדם (ועל כך בפוסט אחר), המשך הדיון יתמקד בחברות בדירוג השקעה.
</p>

<p>
אג"ח ממשלתי הוא אפיק השקעה בטוח יחסית, במובן זה שניתן לומר בסבירות גבוהה שממשלת ישראל תעמוד הן בתשלומי הריבית והן בהחזר הקרן <a href="#!" class="popup">(**)<span class="popuptext">ממשלת ישראל מעולם לא פשטה רגל – ואם זה יקרה, העובדה שחובכם לא ישולם תהיה הקטנה שבצרותיכם.</span></a>. במקרה הגרוע מכל – הממשלה תמיד תוכל להדפיס כספים או להעלות מיסים כדי לשלם את חובותיה.
</p>
<script>
var showPopup = function(e) {
  var popupLink = e.target;
	var currentPopup = jQuery(popupLink).children('.popuptext');
  jQuery('.popuptext').not(currentPopup).removeClass("show");
  currentPopup.toggleClass('show');
  return false;
}
jQuery(document).ready(function() {
	jQuery('.popup').click(showPopup);
});
</script>
</body>
</html>

CSS

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -112px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}