Le système visibility:hidden/visible fonctionne parfaitement, pas le display: none/visible. Une idée d'explication ? 

<style>
  .cadre{height:150px;
width:300px;border:2px red solid;
}

p{
  display:flex;left:100px;top:50px;
  text-align:center;
  display:inline-block; 
  position:relative;
  border:1px black solid;
  width:60px; 
 
}

span{ 
  position:absolute;width: 50px; 
  padding:4px 0; 
  text-align:center;
  color:white;background-color:black;
  bottom: 100%;left:50%;margin-left:-25px;
  display:none;
  z-index:1;
}

p:hover span{display:visible;}
</style>


<div class="cadre">
  <p>hello<span>grouille</span></p>
</div>