TIP - how to change position hover effect

Question

I have try add to my website script with help tip. I want change position hover effect because now is wrong. Anyone help me how can I to do?

Here I add screen with Currently effect:

here I paste +/- expected result:

    .help-tip{
        position: absolute;
        top: 55px;
        right: 11px;
        text-align: center;
        background-color: #BCDBEA;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 14px;
        line-height: 26px;
        cursor: default;
    }
    
    .help-tip:before{
        content:'?';
        font-weight: bold;
        color:#fff;
    }
    
    .help-tip:hover p{
        display:block;
        transform-origin: 100% 0%;
    
        -webkit-animation: fadeIn 0.3s ease-in-out;
        animation: fadeIn 0.3s ease-in-out;
    
    }
    
    .help-tip p{    /* The tooltip */
        display: none;
        text-align: left;
        background-color: #1E2021;
        padding: 60px;
        width: 300px;
        position: absolute;
        border-radius: 3px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        right: -4px;
        color: #FFF;
        font-size: 13px;
        line-height: 1.4;
    }
    
    .help-tip p:before{ /* The pointer of the tooltip */
        position: absolute;
        content: '';
        width:0;
        height: 0;
        border:6px solid transparent;
        border-bottom-color:#1E2021;
        right:10px;
        top:-12px;
    }
    
    .help-tip p:after{ /* Prevents the tooltip from being hidden */
        width:100%;
        height:40px;
        content:'';
        position: absolute;
        top:-40px;
        left:0;
    }
    
    /* CSS animation */
    
    @-webkit-keyframes fadeIn {
        0% { 
            opacity:0; 
            transform: scale(0.6);
        }
    
        100% {
            opacity:100%;
            transform: scale(1);
        }
    }
    
    @keyframes fadeIn {
        0% { opacity:0; }
        100% { opacity:100%; }
    }
    </style>

<div class="help-tip">
    <p>MSRP - Sugerowana cena sprzedaży przez producenta</p>
</div>

Anyone provide any solution?

I can put this topic because system return error: It looks like your post is mostly code; please add some more details.

Answer 1

Just change css for .help-tip p and .help-tip p:before

    .help-tip{
        position: absolute;
        top: 55px;
        right: 11px;
        text-align: center;
        background-color: #BCDBEA;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 14px;
        line-height: 26px;
        cursor: default;
    }
    
    .help-tip:before{
        content:'?';
        font-weight: bold;
        color:#fff;
    }
    
    .help-tip:hover p{
        display:block;
        transform-origin: 100% 0%;
    
        -webkit-animation: fadeIn 0.3s ease-in-out;
        animation: fadeIn 0.3s ease-in-out;
    
    }
    
    .help-tip p {
display: none;
text-align: left;
background-color: #1E2021;
padding: 10px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
top: -60px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}

.help-tip p:before {
position: absolute;
content: '';
width: 0;
height: 0;
transform: rotate(178deg);
border: 6px solid transparent;
border-bottom-color: #1E2021;
right: 10px;
bottom: -12px;
}
    
    .help-tip p:after{ /* Prevents the tooltip from being hidden */
        width:100%;
        height:40px;
        content:'';
        position: absolute;
        top:-40px;
        left:0;
    }
    
    /* CSS animation */
    
    @-webkit-keyframes fadeIn {
        0% { 
            opacity:0; 
            transform: scale(0.6);
        }
    
        100% {
            opacity:100%;
            transform: scale(1);
        }
    }
    
    @keyframes fadeIn {
        0% { opacity:0; }
        100% { opacity:100%; }
    }
    </style>

<div class="help-tip">
    <p>MSRP - Sugerowana cena sprzedaży przez producenta</p>
</div>

Answer 2

You can change this by changing the absolute positioning of the tooltip.

You need to move the tooltip above the question mark, and flip the pointer of the tooltip. This code should fix it:

.help-tip p {
  bottom: 30px;
}


.help-tip p:before {
  right: 10px;
  bottom: -12px;
  transform: rotate(180deg);
}

It will move the tooltip above the question. I've added the code to alter the :before so that the pointer is below, not above, and then rotated it.