In this scenario, I have implemented two status buttons with different colors. The green button corresponds to "RUNNING" and the red button indicates "TERMINATED", which are fetched from JASON data.
Upon hovering over the green status button, the text "RUNNING" is supposed to appear. However, I have encountered an issue where nothing is displayed upon hovering over the button.
To provide some context, refer to the following image:
https://i.sstatic.net/tV2DJ.png
https://i.sstatic.net/0YdhR.png
The code snippet that I attempted is as follows:
<button type="button" class="btn {{.Status | statusButtonClass}} btn-circle"
data-toggle="popover" data-placement="right" data-content="hello" data-
trigger="hover">
<i class="glyphicon glyphicon-ok"></i>
</button>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'right'
});
});
</script>
.btn-circle{
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
Currently, my project utilizes Bootstrap version 4.
I would greatly appreciate any assistance or insights on resolving this issue.