私は以下のようなdivを作成していますが、ツールチップのようなテキストを表示するときにdivを表示したいと考えています。テキストをホバリングしたときにDivを表示するようにする
<Div id="cont">
<table> .. <.table>
</div>
<Label> Show Me </label>
私は以下のようなdivを作成していますが、ツールチップのようなテキストを表示するときにdivを表示したいと考えています。テキストをホバリングしたときにDivを表示するようにする
<Div id="cont">
<table> .. <.table>
</div>
<Label> Show Me </label>
さも以下試してみてください下に試してみてください。
<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>
<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();
});
});
ツールチップを作成するjavascriptの、唯一のHTMLとCSS withot可能です:あなたが上に凡例を閉じたいんあなた/伝説終了タグの中に
[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>
エラーまたは底? –