Какой самый эффективный способ добавить всплывающую подсказку к этим кнопкам без добавления дополнительной разметки? Есть ли способ добавить содержание всплывающей подсказки в javascript вместо разметки--. Я использую некоторые javascript, чтобы в основном захватить все внутри класса bs-example, поэтому я не хочу добавлять ненужную разметку на экран.
.dropdown, .dropleft, .dropright, .dropup{
position: inherit;
}
.dropdown-menu.show {
width: 100%;
background: #999;
padding: 0;
margin: 0;
border-radius: 0;
border: none
}
.dropdown-menu.show {
display: inline-flex;
}
.dropdown-item {
display: inline-block;
float: left;
width: auto;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
/* color: #333;*/
}
.start {
width:141px;
padding: 20px;
}
.btn {
min-width: 200px;
}
.btn-secondary1 {
color: #fff;
background-color: #919ca7;
border-color: #6c757d;
}
.btn-secondary2 {
color: #fff;
background-color: #7d878f;
border-color: #6c757d;
}
.btn-secondary3 {
color: #fff;
background-color: #6c757d;
border-color: #5c6268;
}
.btn-secondary4 {
color: #fff;
background-color: #4a5055;
border-color: #6c757d;
}
.ms-dlgCloseBtnImg {
border-style: none !important;
max-width: inherit !important;
}
.ms-dlgTitleBtns {
margin-right: 0px;
}
.fake-underline{
text-decoration: underline;
}
.circular-image {
align-content: center;
border-radius: 50%;
width: 150px;
height: 150px;
}
.accordion {
position:relative;
background-color:white;
}
.accordion > input {
display:block;
margin:0 0;
width:100%;
height:30px;
position:relative;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.accordion > label {
display:block;
font:bold 18px/30px Arial,Sans-Serif;
background-color:#a0aec0;
color:white;
margin:-30px 0 0 0;
padding:0 15px;
}
.accordion > div {
padding:10px 15px;
display:none;
}
.accordion > input:checked + label {
background-color:slateblue;
}
.accordion > input:checked + label + div {
display:block;
}
.accordion input[type="radio"]:checked + label i.icon::before{
transform: rotate(0deg);
}
i.icon{
position: relative;
margin-top: 10px;
width: 20px;
height: 20px;
margin-right: 25px;
}
i.icon::after{
content: "";
display: block;
width: 12px;
height: 3px;
background: #fff;
top: 10px;
left: 0;
position: absolute;
}
i.icon::before{
content: "";
display: block;
width: 12px;
height: 3px;
background: #fff;
top: 10px;
left: 0;
transform: rotate(90deg);
position: absolute;
transition: all linear 0.2s;
}
.bs-example {
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<H2>tester<i style="font-size:20px;cursor:pointer;margin-left:10px;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></H2>
<p>Please select the corresponding rating for each</p>
<div class="bs-example">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="start">
<strong>1</strong>
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Novice
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Advanced Beginner
</label>
</div>
</div>