when i click the anchor tag to hide the tooltip, it still shows it-CodePudding

I have a tooltip that I have created which when I click shows the tooltip however, when click close, the inline style still shows as block instead of none.

$(".question-circle").hover(function(){
    //$(".popup-background").show();
    $(".tooltip-text").show();
});

$(".close-tooltip").click(function(){
    //$(".popup-background").fadeOut(); 
    $(".tooltip-text").hide();
                        
});

.question-circle {
    display: inline-block;
    position: relative;
    bottom: 4px;
}

.tooltip-text {
    top: 25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #5e5e62;
    border-radius: 3px;
    padding: 10px 15px;
    z-index: 2;
    width: 230px;
    font-size: 12px;
    font-weight: 400;
    display: none;
    transition: opacity 0.5s ease;
    border: solid 1px #C4C4C4;
    z-index: 9999;
    box-shadow: 1px 2px 13px #848484;
    line-height: 17px;
}

.tooltip-text a {
    display: block;
    text-align: center;
    text-decoration: none !important;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    left: 45%;
    top: -24%;
    border: 15px solid;
    border-color: #fff #12000000 #0000 #0000;
    transform: rotate(180deg);
}.question-circle {
    display: inline-block;
    position: relative;
    bottom: 4px;
}

.tooltip-text {
    top: 25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #5e5e62;
    border-radius: 3px;
    padding: 10px 15px;
    z-index: 2;
    width: 230px;
    font-size: 12px;
    font-weight: 400;
    display: none;
    transition: opacity 0.5s ease;
    border: solid 1px #C4C4C4;
    z-index: 9999;
    box-shadow: 1px 2px 13px #848484;
    line-height: 17px;
}

.tooltip-text a {
    display: block;
    text-align: center;
    text-decoration: none !important;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    left: 45%;
    top: -24%;
    border: 15px solid;
    border-color: #fff #12000000 #0000 #0000;
    transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div >
    <img src="https://dev.touchneurology.com/wp-content/themes/tmm/images/graphics/circle-question-regular.svg">
    <span >Words here to explain what touchINCONVERSATION is. Nothing too wordy but enough to give user an idea of what it is about.
        <a  href="#">Close</a>
     </span>
</div>

CodePudding user response：

Because you are still hovering .question-circle the .show() kicks back in again.

I have added the class to the image instead of the div.

$(".question-circle").hover(function(){
    //$(".popup-background").show();
    $(".tooltip-text").show();
});

$(".close-tooltip").click(function(){
    //$(".popup-background").fadeOut(); 
    $(".tooltip-text").hide();
                        
});

.question-circle {
    display: inline-block;
    position: relative;
    bottom: 4px;
}

.tooltip-text {
    top: 25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #5e5e62;
    border-radius: 3px;
    padding: 10px 15px;
    z-index: 2;
    width: 230px;
    font-size: 12px;
    font-weight: 400;
    display: none;
    transition: opacity 0.5s ease;
    border: solid 1px #C4C4C4;
    z-index: 9999;
    box-shadow: 1px 2px 13px #848484;
    line-height: 17px;
}

.tooltip-text a {
    display: block;
    text-align: center;
    text-decoration: none !important;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    left: 45%;
    top: -24%;
    border: 15px solid;
    border-color: #fff #12000000 #0000 #0000;
    transform: rotate(180deg);
}.question-circle {
    display: inline-block;
    position: relative;
    bottom: 4px;
}

.tooltip-text {
    top: 25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #5e5e62;
    border-radius: 3px;
    padding: 10px 15px;
    z-index: 2;
    width: 230px;
    font-size: 12px;
    font-weight: 400;
    display: none;
    transition: opacity 0.5s ease;
    border: solid 1px #C4C4C4;
    z-index: 9999;
    box-shadow: 1px 2px 13px #848484;
    line-height: 17px;
}

.tooltip-text a {
    display: block;
    text-align: center;
    text-decoration: none !important;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    left: 45%;
    top: -24%;
    border: 15px solid;
    border-color: #fff #12000000 #0000 #0000;
    transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <img   src="https://dev.touchneurology.com/wp-content/themes/tmm/images/graphics/circle-question-regular.svg">
    <span >Words here to explain what touchINCONVERSATION is. Nothing too wordy but enough to give user an idea of what it is about.
        <a  href="#">Close</a>
     </span>
</div>

CodePudding user response：

As said in the other answer, you are still hovering over the container while clicking to close the tooltip. As solution is to remove the event handler and reapply the event handler after you've hidden the tooltip

$(".question-circle").on('mouseover', function(){
    showTooltip($(this));
});



function showTooltip(parent) {
    parent.off('mouseover');

    $(".tooltip-text", parent).show();

    $(".close-tooltip", parent).on('click', function() {
        $(this).parent().hide(300, function() {      
            parent.on('mouseover', function() {
                showTooltip($(this));
            });
        });
    });
}

.question-circle {
    display: inline-block;
    position: relative;
    bottom: 4px;
}

.tooltip-text {
    top: 25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #5e5e62;
    border-radius: 3px;
    padding: 10px 15px;
    z-index: 2;
    width: 230px;
    font-size: 12px;
    font-weight: 400;
    display: none;
    transition: opacity 0.5s ease;
    border: solid 1px #C4C4C4;
    z-index: 9999;
    box-shadow: 1px 2px 13px #848484;
    line-height: 17px;
}

.tooltip-text a {
    display: block;
    text-align: center;
    text-decoration: none !important;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    left: 45%;
    top: -24%;
    border: 15px solid;
    border-color: #fff #12000000 #0000 #0000;
    transform: rotate(180deg);
}.question-circle {
    display: inline-block;
    position: relative;
    bottom: 4px;
}

.tooltip-text {
    top: 25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #5e5e62;
    border-radius: 3px;
    padding: 10px 15px;
    z-index: 2;
    width: 230px;
    font-size: 12px;
    font-weight: 400;
    display: none;
    transition: opacity 0.5s ease;
    border: solid 1px #C4C4C4;
    z-index: 9999;
    box-shadow: 1px 2px 13px #848484;
    line-height: 17px;
}

.tooltip-text a {
    display: block;
    text-align: center;
    text-decoration: none !important;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    left: 45%;
    top: -24%;
    border: 15px solid;
    border-color: #fff #12000000 #0000 #0000;
    transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <img src="https://i.picsum.photos/id/237/1000/1000.jpg?hmac=5nME13-xBzl4yi2t1tFev6zsf5IWO2-efZAoXEm9ltc">
    <span >Words here to explain what touchINCONVERSATION is. Nothing too wordy but enough to give user an idea of what it is about.
        <a  href="#">Close</a>
     </span>
</div>