ポップアップテキストの位置を変更するにはどうすればいいですか？

Question

ポップアップテキスト（フランス語）のためのCSSは次のとおりです。

.label-mobile-languageselector .popuptext { 
     visibility: hidden; 
     width: 360px; 
     background-color: #668A04 !important; 
     color: #fff; 
     text-align: left; 
     /* border-radius: 6px; */ 
     padding: .5px 0; 
     position: absolute; 
     z-index: 1; 
     bottom: -67%; 
     left: -271%; 
     margin-left: -80px; 
    } 

私の仕事は、画像のように が少し上向きにある底部に向かって、ポップアップテキストを少しシフトすることです。

私はtext-alignプロパティを使用してポップアップテキストの位置を変更しようとしましたが、残念ながら私は底に向かって移動することができません。

text-align: center; 
text-align: left; 
text-align: right; 

画像のためのCSS（上図のように）のポップアップテキストがある前に：ここでは

.label-mobile-languageselector .popuptext:before { 

content:url('img/globe.png'); 
    display:inline-block; 
    float:left; 
    width: 30px; /* whatever width you need */ 
    height: 29px; /* whatever height you need */ 
    margin-right: 0.5em; /* whatever margin is needed to separate the image from the text */ 

} 

は（現時点ではポップアップがなぜわからないfiddle機能していません）

Answer 1

私からの抜粋：Fiddle：

.label-mobile-languageselector .popuptext { 
    visibility: hidden; 
    width: 360px; 
    background-color: #668A04 !important; 
    color: #fff; 
    text-align: left; 
    padding: 15px 0 0; 
     /* Added padding, adjust to your needs */ 
    position: absolute; 
    z-index: 1; 
    /*height: 29px !important;*/ 
     /* height removed */ 
    /*bottom: -67%;*/ 
     /* bottom removed */ 
    left: -271%; 
    top: 48px; 
     /* top added */ 
    margin-left: -80px; 
} 

.label-mobile-languageselector .popuptext::after { 
    content: ""; 
    position: absolute; 
    top: -16px; 
     /* top changed to the arrow height */ 
    left: 58.2%; 
    margin-left: -5px; 
    border-width: 8px; 
    border-style: solid; 
    border-color: #668A04 transparent transparent transparent; 
    transform: rotateX(180deg); 
}