html - 工具提示 self 包装

Question

我有一些段落，里面有一些工具提示，问题是这些工具提示中的一些没有留在短语中，而是从一个新字符串开始。

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/

从上面的示例中可以看出，即使有足够的空间可供使用，两个蓝色词(Trasimeno 和 Perugia)也不会留在短语中。

如何将这两个词放入短语中？

Answer 1

为您的段落设置display: inline;样式:

.col1 p {
    margin: 
    padding: 0;
    display: inline;
}

同时将 z-index 添加到 .info 中，当鼠标悬停在工具提示上时，其值大于工具提示(现在未设置，所以即使 1 也应该有效)，以用工具提示信息覆盖它们。

.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;
}

检查这个fiddle请。