マウスオーバーポップアップのスピーチバブル

Question

私はjavascript/cssを初めて使用しており、下に表示されている単語に似たマウスオーバーポップアップのバージョンを作成したいと考えています：http://st.japantimes.co.jp/essay/?p=ey20141219 使用されているコードはわかりますが自分のプロジェクトのコードを編集するときに、自分のスピーチバブルのイメージをどこに追加するかわからない。ここで

が参照されたページ上で使用されるコードの例です：

HTML：

<a style="cursor:pointer;" onclick="showChuPopup(event,'<b>’Twas</b><br />It was の省略');return false;" onmouseover="showChuPopup(event,'<b>’Twas</b><br />It was の省略');" onmouseout="endChuPopup();">’Twas</a> 

Javascriptを：任意のヘルプやアイデアを

function showChuPopup(e,text){ 
if(document.all)e = event; 

var obj = document.getElementById('chu_popup'); 
var obj2 = document.getElementById('chu_popup_text'); 
obj2.innerHTML = text; 
obj.style.display = 'block'; 
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);/* 
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;*/ 
var leftPos = e.clientX - 100; 
if(leftPos<0)leftPos = 0; 
obj.style.left = leftPos + 'px'; 
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';} function endChuPopup() { 
document.getElementById('chu_popup').style.display = 'none';} function touchHandler(e){ 
document.getElementById('chu_popup').style.display = 'none';} 

感謝。

Answer 1

これについてはいくつかの方法がありますが、2つのオプションをお勧めし、両方へのリンクを提供します。

---

まず、これは何をしたいかどうかを確認するために、この質問に答えをチェックアウト：

jQuery Popup Bubble/Tooltip

---

を第二、あなただけのAを使用してについて考えていますCSSを使用したツールチップですか？まったく実装するのは難しいことではなく、データを絶対にバインドすることもできます。

（臆面もなくから盗まれた：あなたが初心者ならhttps://www.w3schools.com/css/css_tooltip.asp、私はブートストラップに探してここにもチャンスをうかがっをお勧めします！）

<style> 
.tooltip { 
    position: relative; 
    display: inline-block; 
    border-bottom: 1px dotted black; 
} 

.tooltip .tooltiptext { 
    visibility: hidden; 
    width: 120px; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0; 
    position: absolute; 
    z-index: 1; 
    top: 150%; 
    left: 50%; 
    margin-left: -60px; 
} 

.tooltip .tooltiptext::after { 
    content: ""; 
    position: absolute; 
    bottom: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: transparent transparent black transparent; 
} 

.tooltip:hover .tooltiptext { 
    visibility: visible; 
} 
</style> 

<div class="tooltip">Hover over me 
    <span class="tooltiptext">Tooltip text</span> 
</div>