懸停文字時顯示Div

Question

我正在創建如下所示的div，並且希望將鼠標懸停在類似工具提示的文本上時顯示該Div。

<Div id="cont">

<table> .. <.table>

</div>


<Label> Show Me </label>

Answer 1

在下面嘗試

<a href="#" rel="popover" data-popover-content="#myPopover">My Popover</a>

<div id="myPopover" class="hide">
    This is a popover list:
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>

$(function(){
    $('[rel="popover"]').popover({
        container: 'body',
        html: true,
        content: function () {
            var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
            return clone;
        }
    }).click(function(e) {
        e.preventDefault();
    });
});

Answer 2

否則請嘗試以下。

<a class="popper" data-toggle="popover">Pop me</a>
<div class="popper-content hide">My third popover content goes here.</div>

<Script>
$('.popper').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});
</script>

Answer 3

僅使用HTML和CSS即可使用JavaScript創建工具提示：

 [data-tooltip] { position: relative; } [data-tooltip]:before, [data-tooltip]:after { display: none; position: absolute; top: 0; } [data-tooltip]:before { border-bottom: .6em solid #000; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; left: 20px; margin-top: 1em; } [data-tooltip]:after { background-color: #333; border: 4px solid #000; border-radius: 7px; color: #ffffff; content: attr(tooltip); left: 0; margin-top: 1.5em; padding: 5px 15px; white-space: pre-wrap; width: 200px; } [data-tooltip]:hover:after, [data-tooltip]:hover:before { display: block; } 

 <a href=# data-tooltip tooltip="This is simple tooltip message">hello world</a>