讓鼠標懸停時顯示Div

Question

我正在創建像下面的div，我想使用鼠標懸停文本時顯示該div。

<Div id="cont"> 

<table> .. <.table> 

</div> 


<Label> Show Me </label> 

Answer 1

要不試試下面。

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

試試下面

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

創建工具提示可能withot JavaScript中，只有HTML和CSS：

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