Tooltips wrap themselves - html

Question

I have some paragraphs with some tooltips inside, problem is some of these tooltips doesn't stay inside the phrase and starts in a new string.
body {
background-color: black;
}
.col1 {
position: relative;
float: left;
left: 125px;
width: 60%;
padding: 0;
margin-left: 30px;
background-color: #FFFFFF;
border: 1px solid gray;
box-shadow: 5px 5px 5px gray;
}
.col1 img {
position: relative;
width: 100%;
height: 80px;
margin: 0;
padding: 0;
}
.col1 h2 {
position: relative;
text-align: center;
top: -58px;
}
.col1 p {
margin: 0;
padding: 0;
}
.tooltip, .tooltip2, .tooltip3, .tooltip4 {
position: relative;
display: inline-block;
padding: 0;
margin: 0;
cursor: pointer;
color: #5790ce;
}
.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2,
.tooltip3:hover .info3, .tooltip3:focus .info3,
.tooltip4:hover .info4, .tooltip4:focus .info4 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.info {
box-sizing: border-box;
position: absolute;
bottom: -380px;
left: 95px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info2 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info3 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info4 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info:before,
.info2:before,
.info3:before,
.info4:before {
position: absolute;
content: '';
width: 100%;
height: 14px;
bottom: -14px;
left: 0;
}
.info:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 378px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info2:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info3:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info4:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.text, .text2, .text3, .text4 {
display: block;
padding: 14px 17px 35px 17px;
color: #8d7200;
}
.more, .more2, .more3, .more4 {
display: inline;
position: relative;
bottom: 20px;
left: 215px;
margin: 0;
padding: 3px 10px;
font-family: 'Times New Roman', sans-serif;
text-decoration: none;
color: green;
font-size: 20px;
font-weight: bold;
border: 2px solid green;
border-radius: 5px;
transition: background-color 0.5s, color 0.5s;
}
.more:hover, .more:focus,
.more2:hover, .more2:focus,
.more3:hover, .more3:focus,
.more4:hover, .more4:focus {
background-color: green;
color: #FFFFFF;
}
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="col1">
<img src="images/corner.png"><h2>GENERALITA'</h2>
<p>L'Umbria è una delle 20 regioni dell'Italia centrale, ricca di paesaggi immersi nel
verde delle valli e di borghi antichi, comprende 888.908 abitanti e si trova nel cuore
della penisola con una superficie di 8.456 km². Di questa regione fa parte il quarto
lago naturale più esteso d'Italia, il
<div onclick="void(0);" class="tooltip">Trasimeno
<div class="info">
<div class="text">Situato in posizione centrale rispetto alle città d’arte
del centro Italia il suo comprensorio è composto da otto comuni, alcuni dei
quali adagiati sulle colline (Città della Pieve, Paciano, Panicale e
Piegaro) ed altri (Castiglione del Lago, Magione, Passignano sul Trasimeno
e Tuoro sul Trasimeno) direttamente affacciati sullo specchio d´acqua.<br><br>
Della bellezza e armonia di questi luoghi se ne accorse anche il principe
Trasimeno che, rimasto affascinato da questo paesaggio, si imbatté nella
bellezza della ninfa Agilla. Da questo duplice incontro nacque una passione
che finì tragicamente con la morte del principe. Da allora il lago prese il
nome di Trasimeno e si dice che quando il vento accarezza le sue acque, si
possa ancora udire il malinconico lamento della ninfa Agilla che piange
alla ricerca del suo amato.</div>
<a class="more" href="#" target="_blank">More</a>
</div>
</div>, il lago di
<div onclick="void(0);" class="tooltip2">Piediluco
<div class="info2">
<div class="text2">Piediluco è un pittoresco centro il cui nome significa "ai
piedi del bosco sacro". Con un assetto rimasto quello del medioevo, con le sue
basse casette colorate, è in realtà dislocato nello stretto lembo di terra che
corre tra il lago ed il monte. Il lago, incassato tra rilievi boscosi, ha
l’aspetto di uno specchio d’acqua alpino. Il paese è dominato dai resti della
Rocca risalente al XI secolo, ormai in parte in rovina, rimane pur sempre
superba ed imponente.<br><br>Molto suggestivo, è circondato da rilievi boscosi,
tra i quali è caratteristica per la sua forma di largo cono la montagna dell'Eco.
Questa montagna deve il suo nome al fatto che è in grado di rimandare un intero
endecasillabo in maniera perfetta.</div>
<a class="more2" href="#" target="_blank">More</a>
</div>
</div>, che confina con
il Lazio, e il bacino artificiale di
<div onclick="void(0);" class="tooltip3">Corbara
<div class="info3">
<div class="text3">Il lago di Corbara è un lago dell'Italia centrale, di origine artificiale,
formatosi con la costruzione negli anni sessanta del bacino idroelettrico omonimo sul fiume Tevere.
Prende il nome dalla frazione di Corbara, località del comune di Orvieto. Fa parte, unitamente ai
territori circostanti, del Parco fluviale del Tevere, area naturale protetta dell'Umbria.<br><br>
Nei pressi del lago si trovano "Vissani", uno dei templi della gastronomia italiana e alcune delle
più rinomate e prestigiose aziende vinicole dell'Umbria, riunite nel Consorzio di tutela del Lago di
Corbara DOC.</div>
<a class="more3" href="#l" target="_blank">More</a>
</div>
</div>. In Umbria vi sono anche molti torrenti
di piccole dimensioni e numerosi fiumi: il Tevere, che raccoglie quasi tutte le acque
degli altri fiumi umbri, il Nera, il Paglia, il Chiascio, il Topino ed il Nestore.
Risaltano tra i "minori" il Corno, il Fersinone, il Clitunno e vari torrenti.</p><br>
<p>La bellezza dell’Umbria nasce dalla fusione tra l'arte e la natura, da luoghi
evocativi, dalla presenza di capolavori rinascimentali e dai suoi borghi medioevali
nelle colline.</p><br>
<p>Il capoluogo umbro è
<div onclick="void(0);" class="tooltip4">Perugia
<div class="info4">
<div class="text4">Perugia, la grande "Arce Guelfa", sorge al centro della regione, con i 5 rioni storici
racchiusi dalle mura Etrusche. Quando la città di Roma era poco più di un accampamento di capanne, nella
Perugia etrusca si entrava da ben 7 porte, tra cui particolarmente imponente, la Porta Pulchra o d'Augusto.
<br><br>Entrando nella città da Porta San Pietro, s'incontra a destra la Basilica di San Domenico. Si
raggiunge poi la Piazza del Sopramuro, dove si allineano il palazzo quattrocentesco dell'Università Vecchia,
unito al Palazzo del Capitano del Popolo. Proseguendo si apre una delle importanti piazze d'Italia: la
Piazza Grande di Perugia (Piazza IV Novembre), dominata al centro dalla Fontana Maggiore risalente al '200.
<br><br>Nella piazza, si apre il superbo complesso monumentale che oltre alla fontana, comprende anche la
Cattedrale e lo splendido Palazzo dei Priori.<br><br>La rampa di Via delle Prome, partendo dall'Arco d'Augusto,
conduce al punto più alto della città, dove sorgeva la fortezza di Porta Sole eretta nel secolo XIV dal
Gattapone e in seguito distrutta a furore di popolo. Da trascurare il complesso di San Francesco, e
l'Oratorio di San Bernardino: capolavoro d'Agostino di Duccio.</div>
<a class="more4" href="#" target="_blank">More</a>
</div>
</div>, centro culturale di cui fanno parte due università
e alcune manifestazioni di importanza internazionale, mentre le province sono
Perugia e Terni; i centri maggiori sono Foligno, Città di Castello, Spoleto,
Gubbio, Assisi, Bastia Umbra, Orvieto, Amelia, Narni, Marsciano e Todi. Confina ad
est e a nord-est con le Marche, a ovest e a nord-ovest con la Toscana; a sud e
sud-ovest con il Lazio.</p><br>
<p>Tra le ricchezze della regione spicca la città medievale di Assisi, iscritta nella
lista dei siti Unesco “Patrimonio Mondiale dell’Umanità” e rappresenta un insieme di
capolavori del genio creativo umano. Ricca di tradizioni tra cui il Calendimaggio,
una rievocazione storica che trasforma la città in un antico borgo medievale abitato
da dame, cavalieri, arcieri e tanti altri personaggi storici. In provincia di Terni
sorge Orvieto, famosa per il Duomo; capolavoro dell'arte gotica; per i palazzi, i
vicoli medievali e il Pozzo di San Patrizio, intorno al quale girano due scale
elicoidali non comunicanti con 248 scalini da percorrere per raggiungere l’acqua a 62
metri di profondità.</p>
</div>
</div>
Fiddle: https://jsfiddle.net/LhjmLw8k/29/
As you can see from the example above two of the blue words (Trasimeno and Perugia) doesn't stay inside the phrase even if there is enough space at their disposal.
What can I do to bring the two words inside the phrase?

Answer 1

Set display: inline; style for your paragraphs:
.col1 p {
margin:
padding: 0;
display: inline;
}
Also add z-index with the value bigger than tooltip (which not set now, so even 1 should work) to .info when hovered over the tooltip, to cover them with tooltip information.
.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2,
.tooltip3:hover .info3, .tooltip3:focus .info3,
.tooltip4:hover .info4, .tooltip4:focus .info4 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
z-index: 100;
}
Check this fiddle please.

Answer 2

Ok after a while I found out why of my problem and the right way to resolve it.
Basically I was unintentionally trying to nest a block element (a <div>) inside an inline element (a <p>) and that's clearly wrong because an inline element can't contain a block element. The right way to overcome the problem was to substitute all the <p> (inline elements>) with <div> (block element) so to have block elements inside other block elements and then style text with the appropriate CSS rules.
Now everything works as it should.