[英]Button's message pop up without click
This is a screenshot of a normal google search这是正常谷歌搜索的截图
I'm trying to get the tiny message box when you go to the mic icon on Google search engine.当您转到 Google 搜索引擎上的麦克风图标时,我正在尝试获取小消息框。 I want to incorporate that to my bootstrap buttons.
我想将它合并到我的引导按钮中。 Following is the code where i want to add a similar message box on Connect and Disconnect button.
以下是我想在“连接和断开连接”按钮上添加类似消息框的代码。
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-6">
<br>
<img style="width:30%" src="icon1.jpg">
<br>
<br>
<button type="button" class="btn btn-success" >
<a style="color:white;" href= "options.html" >
Connect
</a>
</button>
</div>
<div class = "col-12 col-sm-6 col-md-6 ">
<br>
<img style="width:30%" class="float-right" src="icon1.jpg" >
<br>
<br>
<br>
<br>
<br>
<div class ="text-right">
<button type="button" class="btn btn-danger ">
<a style="color:white;" href= "options.html" >
Disconnect
</a>
</button>
</div>
</div>
</div>
</div>
You can follow this code with bootstrap.您可以使用引导程序遵循此代码。 use data-toggle="tooltip" to your button from where you want hover, title is the tooltip/popup and add below script to the footer.
将 data-toggle="tooltip" 用于您想要悬停的按钮,标题是工具提示/弹出窗口,并将以下脚本添加到页脚。 For more follow the link https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
更多信息请点击链接https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.