Header Instagram Icon Hover Text

Site URL: https://www.pinkmoonb.com/shop

Because I have 2 different Instagram Links, they need to be distinguished from each other. 
I would like text to come up when I hover  over the Instagram Icon.

It is live now, please try again.

Anyone??

Hi,

You want

Hover Instagram >> Show text (like as tooltip)?

yes, that is correct

19 hours ago, franvandee said:

yes, that is correct

Add to Design > Custom CSS

/* Hover instagram - First icon */
a.icon.icon--fill[href*="pink_moon_beauty"] {
    position: relative;
}
a.icon.icon--fill[href*="pink_moon_beauty"]:after {
    content: "This is instagram 1";
    display: block;
    position: absolute;
    width: 150px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    top: -30px;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
}
a.icon.icon--fill[href*="pink_moon_beauty"]:hover:after {
    opacity: 1;
}

@tuanphan has provided a neat solution above, to add a label to one of the icons. To do this for both icons, you'd need to duplicate the code, changing the label names and URLs for each icon.

However, duplicating code isn't good practice -  a fundamental software engineering principle is 'DRY' or "Don't Repeat Yourself" - so here is a slightly modified version of the previous answer. This styles the labels once and then adds the individual labels for the two icons below.

/* Label on hover over social icons */
a.icon.icon--fill:after {
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
    padding: 4px 7px;
    border-radius: 5px;
    opacity: 0;
}
a.icon.icon--fill:hover:after {
    opacity: 1;
}
/* Label for Beauty icon */
a.icon.icon--fill[href$="/pink_moon_beauty__/"]:after {
    content: "Beauty";
}
/* Label for Boutique icon */
a.icon.icon--fill[href$="/pink_moonboutique/"]:after {
    content: "Boutique";
}

Thank you guys so much for your smart and apt answers.

I am just not sure why i am not getting the desired result ?
I go tp the home page, Settings, Advanced, and I paste the Custom CSS.
But when I preview the page, there is no difference? Am I doing something incorrect?

4 minutes ago, franvandee said:

I go to the home page, Settings, Advanced, and I paste the Custom CSS.
But when I preview the page, there is no difference?

Custom CSS goes in Design > Custom CSS, not in the Advanced Page Settings or Code Injection areas.

You guys are the best!!!!!

Thank you so much!
Sorted!