TOP TIP

 Este es un Toptip

Ns vamos a Diseñol y antes de B:</Sink> añadimos esto

.tooltip {
display: block;
position: absolute;/* Ocultarlo */
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
max-width: 100%;/* ancho fijo */
z-index: 1;
left: 0;
bottom: 300%;
opacity: 0;
-webkit-transition: all .7s; /* transición */
-moz-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;
background: white;
padding: 10px 1em;
border: 1px solid #ccc;/* El borde */
-webkit-box-shadow: 0 0 4px #ccc;/* La sombra */
-moz-box-shadow: 0 0 4px #ccc;
box-shadow: 0 0 4px #ccc;
}
.tooltip:before, .tooltip:after {/* flechas */
content: "";
width: 0;
height: 0;
border: 6px solid transparent;
position: absolute;
top: 100%;
left: 20px;
margin-left: -6px;
border-top-color: white;
z-index: 2;
}
.tooltip:before {/* La segunda flecha */
border-top-color: #ccc;
margin-left: -7px;
border-width: 7px;
z-index: 0;
}
.has-tooltip {
position: relative;
}
.has-tooltip:hover .tooltip {
clip: rect(auto auto auto auto);
clip: auto;
clip: inherit;
opacity: 1;
bottom: 100%;
}

Luego en la entrada HTML

<span class="has-tooltip">Ver el contenido<span class="tooltip">Éste es el contenido</span></span>

Ver el contenidoÉste es el contenido

Spoiler

<style type="text/css">

div.expand ={

height: 30px;

margin: 0px 65px 0px 65px;

padding: 20px

text-align:left;

overflow:hidden;

border: 2.5px solid #b0c4de;

background-image : url('https://i.pinimg.com/736x/b5/8c/32/b58c32d18df12fe8bbb2675655f66d07.jpg') 100% 50% transparent;

color: navy;

font-size:18px;

font-family: 'montserrat', sans-sefif;

}

div.expand:hover {

height: auto;

margin: 0px 65px 0px 65px;

padding: 20px

text-align:left;

overflow:hidden;

border: 2.5px solid #b0c4de;

background-image : url('https://i.pinimg.com/736x/b5/8c/32/b58c32d18df12fe8bbb2675655f66d07.jpg') 100% 50% transparent;

color: navy;

font-size:18px;

font-family: 'montserrat', sans-sefif;

}

</style>

<div class="expand">

<h4 style="text-align:center;"> Texto a mostrar el contenido oculto....</h4>

Texto expandido del contenido oculto...

</div>

Texto a mostrar el contenido oculto....

Texto expandido del contenido oculto...

Ver el contenidoÉste es el contenido