gpt4 book ai didi

javascript - 应始终显示带有工具提示消息的进度条

转载 作者:太空宇宙 更新时间:2023-11-04 00:59:46 24 4
gpt4 key购买 nike

我有一个要求,需要始终显示带有工具提示消息的进度条。

显示进度条的代码,但不确定如何始终显示工具提示消息。

#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>

关于javascript - 应始终显示带有工具提示消息的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53716828/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com