tootl tip css for wordpress

Require Assistance
tool tip css

.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px 0px;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;

I got the width and padding done but the black arrow of tooltip does not align with the blue i , also is it possible to have the tool tip info above the blue i

Also the tol tip which pulls from details tool tip how can i assign one for each separate page as north island , south and total at the moment it shows same in all tours