easiest way to add a tooltip without adding more markup - css

Question

What is the most efficient way to add a tool tip to these buttons without adding more markup? Is there a way to add the tooltip content in the javascript instead of markup--. I am using some javascript to basically grab everything inside of the bs-example class so I don't want to add unnecessary markup to the screen.
.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>

Answer 1

"Easiest" is very broad term. Read the docs:
https://getbootstrap.com/docs/4.0/components/tooltips/
The most "basic" steps:
1/3. include popper.min.js before bootstrap.js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
2/3. Add data attributes to your markup + title :
<label data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Novice
</label>
3/3. initialize
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
attribute selectors:
https://api.jquery.com/attribute-equals-selector/
Example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<H2>Tooltip</H2>
<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" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Novice
</label>
<label class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Advanced
</label>
</div>
</div>
<script>
/* https://getbootstrap.com/docs/4.0/components/tooltips/#example-enable-tooltips-everywhere */
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
"Without" any extra markup
Use:
$().tooltip(options)
Attaches a tooltip handler to an element collection.
https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipoptions
<script>
$(document).ready(function(){
$(".bs-example label").tooltip({
title: "Hello tooltip."
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<H2>Tooltip</H2>
<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
</label>
</div>
</div>
<script>
$(document).ready(function(){
$(".bs-example label").tooltip({
title: "Hello tooltip."
});
});
</script>

Answer 2

The efficient way to use tooltip is to use existing property than re-inventing the wheel here is in bootstrap.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
Hover me
</div>