javascript - Progress bar with Tooltip message should be displayed always
问题描述
I have a requirement where need to display the progress bar with tool tip message always .
Code to display the progress bar , but not sure how to display the tool tip message always.
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<html>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">10%</div>
</div>
</body>
</html>
解决方案
我发现使用像 bootstrap 这样的框架更容易实现这样的事情。这是你愿意考虑的事情吗?见下文。
$('.tool_tip')
.attr('data-toggle', 'tooltip')
.attr('data-placement', 'right')
.tooltip({
trigger: 'manual'
})
.tooltip('show');
.progress {
background-color: #ddd;
}
.progress-bar {
background-color: #4caf50;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container p-5">
<div class="row mt-5">
<div class="col-sm-12">
<div class="progress" style="height: 30px;">
<div class="progress-bar tool_tip" data-toggle="tooltip" data-placement="right" title="Your Progress" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>
这是基于纯 CSS 而不是 Bootstrap 的第二个答案-
.container {
margin-top: 50px;
padding: 10px;
}
.wrapper {
text-transform: uppercase;
background: #ececec;
color: #555;
cursor: help;
position: relative;
text-align: center;
width: 200px;
}
.wrapper .tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
margin-bottom: 15px;
opacity: 1;
padding: 20px;
pointer-events: none;
position: absolute;
width: 20%;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.wrapper:hover .tooltip {
opacity: 1;
}
/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
display: none;
}
.lte8 .wrapper:hover .tooltip {
display: block;
}
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
line-height: 30px;
color: white;
text-align: center;
}
<div class="container">
<div id="myProgress" class="wrapper">
<div class="tooltip-toggle" aria-label="sample text" tabindex="0" id="myBar">10%</div>
<div class="tooltip">Your Progress</div>
</div>
</div>
推荐阅读
- connection-pooling - Reactive Mongo:已超过 500 的最大操作数 (maxQueueWaitSize)
- c# - System.Text.Json 对象数组反序列化
- c++ - 在循环c ++中限制fps
- javascript - 在我的 Bootstrap 3 测试站点中,本地文件有一个可用的汉堡菜单,但是当我使用 GitHub Pages 托管它时,导航栏不起作用
- php - 没有插件的WordPress弹出窗口
- python-3.x - 找到空行python后停止读取CSV文件
- php - 如何在 laravel 中使用 DomPDF 打印图像?
- r - r - 找到转动的一侧以实现两个轴承之间的最小角度
- reactjs - 问题让 HighchartsReact 组件正确填写容器
- spring-boot - 如何使用resttemplate对url进行编码,在查询参数中包含特殊字符