Post by rayan224 » Mon Aug 20, 2018 10:03 pm

Hello,

I found this awesome inline help tip from here: https://tutorialzine.com/2014/07/css-inline-help-tips
and I would like to put beside the "Address" input in the registration page and I am not sure how to do it I tried many times to modify the language file and the template file and honestly I am not sure where to put it? In the template or the language? Please check out the picture attached to get an idea of what I am trying to do!

Here is the HTML CODE for the inline help tip

Code: Select all

<div class="help-tip">
    <p>This is the inline help tip! It can contain all kinds of HTML. Style it as you please.</p>
</div>
and here is the CSS code for the inline help tip

Code: Select all

.help-tip{
    position: absolute;
    top: 18px;
    right: 18px;
    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: 20px;
    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%; }
}

Obviously the CSS code I should put it in the CSS but not sure where to put the HTML code could you please help?

Attachments

123.png

123.png (43.68 KiB) Viewed 865 times


Newbie

Posts

Joined
Thu May 03, 2018 4:43 am


Post by synapseindia » Thu Aug 23, 2018 9:00 pm

Hi,

You can use Bootstrap tooltip to do the same -
For example - Beside address field on registration page you can add -

Code: Select all

<i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Type here.... whatever you want to show there."></i>
and in footer file -

Code: Select all

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

</script>

User avatar
Active Member

Posts

Joined
Thu Apr 05, 2018 2:27 pm
Who is online

Users browsing this forum: No registered users and 9 guests