My code currently includes a popup menu that shows up when I hover over the icon. However, I need to adjust it so that the popup changes its state from hover to active.
Intended behavior: When I click the icon, the popup should appear and then disappear when I click the icon again (like a toggle function).
I attempted to change the hover state to active, but it only partially worked. The popup appears milliseconds after being clicked, and I'm unable to achieve the desired toggle behavior.
Below is the code snippet for reference:
<template>
<div class="popup">
<font-awesome-icon :icon="infoIcon" />
<span class="tooltip" id="myPopup"> <b>Popupheader</b><br />Popup
content</span>
</div>
</template>
<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import { faInfoCircle } from '@fortawesome/fontawesome-free-solid';
computed: {
infoIcon() {
return faInfoCircle;
},
},
</script>
<style>
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .tooltip {
background: $custom-control-indicator-bg;
bottom: 100%;
font-size: 10pt;
color: $dark-color;
display: block;
left: -140px;
margin-bottom: 15px;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
border-radius: 9px 9px 9px 9px;
width: 300px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.popup .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.popup .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid $custom-control-indicator-bg 10px;
bottom: -10px;
content: " ";
height: 0;
left: 51%;
margin-left: -13px;
position: absolute;
width: 0;
}
.popup:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
</style>