[英]Make to show the Div when Hover the Text
I am creating the div like below and I wanna make to show that Div when hover the text like tooltip. 我正在创建如下所示的div,并且希望将鼠标悬停在类似工具提示的文本上时显示该Div。
<Div id="cont">
<table> .. <.table>
</div>
<Label> Show Me </label>
Try Below 在下面尝试
<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();
});
});
Or else Try below. 否则请尝试以下。
<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>
Creating a tooltip is possible withot javascript, only HTML and CSS: 仅使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.