javascript - 当有人将光标移到html中的按钮上时如何创建弹出框？

Question

在这里，我有两个状态按钮，一个绿色返回 RUNNING，第二个红色按钮返回来自 JASON 的 TERMINATED。

当将光标移动到绿色状态按钮上时，它会悬停“正在运行”。试图将鼠标悬停在按钮上，但它没有显示任何内容。

这是所需的屏幕：

这是我尝试过的代码：

  <button type="button" class="btn {{.Status | statusButtonClass}} btn-circle" 
  data-toggle="popover" data-placement="right" data-content="hello" data- 
  trigger="hover"> 

<i class="glyphicon glyphicon-ok"></i>
</button>

<script>
 $(document).ready(function(){
$('[data-toggle="popover"]').popover({
    placement : 'right'
});
});
</script>



.btn-circle{
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
} 

我目前正在使用 Bootstrap 4 版本。

任何帮助将不胜感激。

标签： javascriptjqueryhtmlcss

Answer 1

它被称为你想要得到的工具提示。如果您使用的是引导程序，只需检查此链接Bootstrap tooltips就很容易了。

根据您的代码，您可以做的是更改功能

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({
        placement : 'right'
    });
});
</script>

并将代码更改为此，

<button type="button" class="btn {{.Status | statusButtonClass}} btn-circle" 
  data-toggle="tooltip" data-original-title="Running"><i class="glyphicon glyphicon-ok"></i>
</button>

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip({
    placement: 'right'
  });
});

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<button type="button" class="btn btn-circle" 
  data-toggle="tooltip" data-original-title="Running"><i class="fa fa-check"></i>
</button>