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

或者尝试以下。

$('.li-quantity')

Answer 3

可以使用javascript创建工具提示，只能使用HTML和CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

在悬停文本时显示Div

3 个答案: