Javascript 当鼠标悬停在图像上时，如何在侧面板中弹出文本（使用模式代码）？

我目前有一个模式，显示我的页面上各种图像的信息。当我点击一张图片时，会弹出很多信息。然而，为了快速访问，我也希望有一个信息框在一边快速显示时，悬停在。我不知道如何使这项工作，因为我是如何利用数据进行结构化的

//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>

//这将在模式中显示信息
&时代；
形象
//用于从模型获取信息的脚本
$（'#myModal'）.on（'show.bs.modal'，函数（事件）{
var按钮=$（event.relatedTarget）；
var Title=按钮数据（“Title”）；
var稀有性=按钮数据（“稀有性”）；
var效应=按钮数据（“效应”）；
变量说明=按钮数据（'说明'）；
var Stack=button.data（'Stack'）；
var Tags=button.data（'Tags'）；
var image=button.data（'image'）；
var modal=$（本）；
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标记'）.text（标记）；
modal.find（'.modal body'）.html（''）；
})
//这是一个示例项目，我会点击（模态工程），但是，我不知道如何触发此信息显示在侧面板时，悬停。

我建议创建一个JavaScript函数，获取所需的值，并将它们连接成一个大字符串，输出到侧栏中。对于每个项

标记，添加一个指向该函数的

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";
}

进入每个项目的

标签上的

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
}