モーダルコードを使用して画像の上にマウスを移動したときにサイドパネルでテキストポップアップを作成するにはどうすればよいですか？

Question

私は現在、自分のページのさまざまなイメージに関する情報を表示するモーダルを持っています。画像をクリックすると、多くの情報がポップアップします。しかし、素早くアクセスするために、私はまた、横になったときにすぐに表示される情報ボックスを持っていたいと思います。私はデータでどのように構造化されているので、この作業をどうやって行うのか分かりません。

//this displays the information in the modal 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel">IMAGE</h4> 
      </div> 
      <div class="modal-name"> 
      </div> 
      <div class="modal-rarity"> 
      </div> 
      <div class="modal-effect"> 
      </div> 
      <div class="modal-description"> 
      </div> 
      <div class="modal-stack"> 
      </div> 
      <div class="modal-tags"> 
      </div> 
      <div class="modal-body"> 
      </div> 
     </div> 
    </div> 
</div> 

//script for getting the information from the modal 
<script> 
    $('#myModal').on('show.bs.modal', function (event) { 
     var button = $(event.relatedTarget); 
     var Title = button.data('title'); 
     var Rarity = button.data('rarity'); 
     var Effect = button.data('effect'); 
     var Description = button.data('description'); 
     var Stack = button.data('stack'); 
     var Tags = button.data('tags'); 
     var image = button.data('image'); 
     var modal = $(this); 
     modal.find('.modal-title').text(Title); 
     modal.find('.modal-rarity').text(Rarity); 
     modal.find('.modal-effect').text(Effect); 
     modal.find('.modal-description').text(Description); 
     modal.find('.modal-stack').text(Stack); 
     modal.find('.modal-tags').text(Tags); 
     modal.find('.modal-body').html('<img src="' + image + '" alt="' + Title + '" class="center-block">'); 
    }) 
</script> 
// this is an example item that i would be clicking on (modal works) however, i don't know how to trigger this information to show up in a side panel when hovered over. 
<div id="items"> 
    <!--Tier 1 Offence--> 
    <li id="item"> 
     <!--Barbed Wire--> 
     <a href="#" data-toggle="modal" data-target="#myModal" 
      data-title="Barbed Wire" 
      data-rarity="Common" 
      data-description="In Range: Mobs take 50% DPS. Barbed wire will inflict on only one mob at a time." 
      data-stack="On Stack: +20% radius and +10% DPS." 
      data-tags="barbed, wire, barbed wire" 
      data-image="images/items/Barbed Wire.png"> 
      <img src="images/items/Barbed Wire.png" alt="Barbed Wire" class="img-thumbnail"> 
     </a> 
    </li> 
</div> 

Answer 1

希望する値を取得し、サイドバーに出力できる1つの大きな文字列に連結するJavaScript関数を作成することをお勧めします。 <a>タグのそれぞれについて、その関数を指すonmouseover=タグと、関数または式を指すonmouseleave=タグを追加して、サイドバーを再び非表示にします。 各データタグから値を取得し、それらをいくつかのラベルと改行で連結し、の要素にそれを表示します。これは以前にdisplay: noneまたはdisplay: hidden（CSS内）に設定されています。 onmouseover=タグ：

function displayTags() { //there are many other ways to structure this, and this is probably not the most efficient way 
    var tags = []; 
    tags.push(this.getAttribute("data-title")); 
    tags.push(this.getAttribute("data-rarity")); 
    tags.push(this.getAttribute("data-effect")); 
    tags.push(this.getAttribute("data-description")); 
    tags.push(this.getAttribute("data-stack")); 
    tags.push(this.getAttribute("data-tags")); 
    var sidebar = document.getElementById("sidebar"); //or whatever you've named your sidebar 
    var out = "Title: " + tags[0] + "<br />Rarity: " + tags[1] + "<br />Effect: " + tags[2]; //and so on 
    sidebar.innerHTML = out; 
    sidebar.style.display = "visible"; 
} 

関数はイベントによってトリガされた場合、thisキーワードは、イベントを発射した要素を参照する必要があります。

その後、再び離れてサイドバーを非表示にするには、あなたにも、各項目<a>タグにonmouseleave=には、この

function hideSideBar() { 
    document.getElementById("sidebar").style.display = "none"; //or "hidden", depending on how you want it's presence to affect the layout of the entire page 
} 

のような機能を置くところ。

私が書いたことは、あなたが持っているもので作業するために微調整が必​​要な場合がありますが、一般的な考え方を十分にクリアしたと思います。