Использование CSS всплывающих подсказок в DIV с несколькими столбцами

Question

Мне нужно отобразить всплывающие подсказки для определенных c терминов в div с несколькими столбцами, и мне нужно, чтобы они работали в нескольких браузерах. Я начал с примера w3schools CSS Tooltip , который прекрасно работает в обычном (с одним столбцом) контейнере. Но с несколькими столбцами Chrome имеет некоторые серьезные (возможно, не разрушающие сделки) проблемы с форматированием, и Safari терпит неудачу, обрезая всплывающую подсказку в столбце, в котором она должна отображаться. Firefox работает правильно.

Firefox:

Chrome:

Safari:

Я подумал, что, возможно, Safari рассматривает переполнение, как если бы оно было скрыто, но если так, я не мог найти способ изменить его поведение. И я не смог найти ни одного существующего вопроса, касающегося проблем с форматированием всплывающей подсказки в многостолбцовых макетах.

Теперь я волнуюсь, что мне, возможно, придется прикусить пулю и написать пользовательский javascript, чтобы обнаружить зависание, взять текст всплывающей подсказки, вставить текст в div, который всплывает над содержимым моего странице, покажите элемент div, правильно расположенный по отношению к ссылке, и снова скройте его, когда мышь уходит с ссылки Очевидно, было бы намного проще, если бы я мог заставить код подсказки w3schools работать с несколькими столбцами. (Использование таблицы или сетки вместо нескольких столбцов не подходит для этого проекта.)

Кто-нибудь еще сталкивался (и, надеюсь, решил) эту проблему?

Вот мой код; если вы запустите фрагмент, вы увидите, что верхний div показывает обычный одностолбцовый div, который отлично работает во всех браузерах; нижний элемент div состоит из двух столбцов, из которых были получены снимки экрана выше.

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 160%;
  left: 50%;
  margin-left: -75px;
  /* Use half of the width (150/2 = 75), to center the tooltip */
}

.tooltip .tooltiptext::after {
  /* Add an arrow */
  content: " ";
  position: absolute;
  bottom: 100%;
  /* At the top of the tooltip */
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.contentDiv {
  margin-left: 50px;
  padding: 5px;
  width: 100px;
  border: 1px solid black;
}

.contentDiv p {
  margin: 0;
}

.contentDiv.twoColumn {
  width: 210px;
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-rule: 1px solid black;
  -moz-column-rule: 1px solid black;
  -webkit-column-rule: 1px solid black;
}

<div class="contentDiv">
  <p>
    <span class="tooltip">Hover 1
            <span class="tooltiptext">Tooltip text for Hover #1.</span>
    </span>
  </p>
  <p>
    <span class="tooltip">Hover 2
            <span class="tooltiptext">Tooltip text for Hover #2.</span>
    </span>
  </p>
</div>
<div style="clear:both;"></div>
<br>
<div class="contentDiv twoColumn">
  <p>
    <span class="tooltip">Hover 3
            <span class="tooltiptext">Tooltip text for Hover #3.</span>
    </span>
  </p>
  <p>
    <span class="tooltip">Hover 4
            <span class="tooltiptext">Tooltip text for Hover #4.</span>
    </span>
  </p>
</div>

Ссылка на JsFiddle

Answer 1

.tooltip .tooltiptext {
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden;
}

Это можно исправить для части переполнения, но я заметил, что последний элемент столбца, всплывающая подсказка будет по-прежнему go вверх, а не под ним.

Чувствуется, что проблема переполнения столбца по-прежнему сохраняется пока что не могу исправить chrome, может быть, можно попробовать использовать flex.

Answer 2

Несовместимость браузеров подорвала мои усилия по поиску решения css, поэтому я укусила пулю, добавила немного javascript и предложила ниже решение, которое работает для меня. Это решение поддерживает как текстовые подсказки (которые могут включать html разметка), так и подсказки к картинкам.

	$(function() {
		var $tip;

		function makeTip () {
			$(document.body).append ("<div id='tooltip'></div>");
			$tip = $("#tooltip");
		}
		
		$(".tipLink").hover (function () { 
			var st = $(this).data ("tip"),
					rect = this.getBoundingClientRect(),
					hasImage = st.match(/^<img/) ? true : false,
					bottomPadding = hasImage ? "5px" : "10px";
			if (!$tip) {
				makeTip ();
			}
			//	It'd be good to preload the image!
			$tip.html (st);
			// Center tooltip and arrow below link.
			$tip.css ({"display":"block",
								"top": window.pageYOffset + rect.bottom + 10 + "px",
								"left": window.pageXOffset + rect.left + rect.width/2,
								"padding-bottom": bottomPadding});
		},
		function () {
			$tip.css ("display", "none");
		});
	});

#tooltip {
	display: none;
	background-color: #444;
  font-family:"Times New Roman", Times, serif;
  font-size: 1.2rem;
  line-height: 1.3rem;
	color: #fff;
	text-align: center;
	padding: 10px;
	border-radius: 6px;
	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
  max-width: 200px;
  transform: translateX(-50%);  /* translate left by half the tip width */
}

#tooltip::after {  /* Add an arrow */
	content: " ";
	position: absolute;
	bottom: 100%;  /* At the top of the tooltip */
	left: 50%;    /* Centered horizontally */
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent #444 transparent;
}

/* The styles below are for the demo, and aren't needed in actual use. */
.contentDiv {
    margin-left: 100px;
    padding: 5px;
    width: 150px;
    border: 1px solid black;
}

.contentDiv p {
    margin: 0;
}

.contentDiv.twoColumn {
    width: 300px;
    column-count:2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-rule: 1px solid black;
    -moz-column-rule: 1px solid black;
    -webkit-column-rule: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class = "contentDiv">
		<p>
			Item 1: <span class="tipLink" data-tip="Tooltip text for Hover #1.">Hover 1</span>
		</p>
		<p>
			Item 2: <span class="tipLink" data-tip="Tooltip text for Hover #2.">Hover 2</span>
		</p>    
	</div>
	<div style="clear:both;"></div>
	<br>
	<div class = "contentDiv twoColumn">
		<p>
			Item 3: <span class="tipLink" data-tip="Tooltip text for Hover #3.">Hover 3</span>
		</p>
		<p>
			Item 4: <span class="tipLink" data-tip="<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/archive/b/b3/20091118075632%21UN_flag.png/120px-UN_flag.png'>">Hover 4</span>
		</p>    
	</div>

В этом решении (с использованием jQuery) отображается текст всплывающей подсказки при наведении курсора на элемент tipLink, например, такой диапазон:

<span class="tipLink" data-tip="Tooltip text">Link</span>

В этом примере «ссылка» - это текст на странице, а содержимое всплывающей подсказки отображается в виде всплывающей подсказки, когда пользователь наводит курсор на слово «ссылка».

В качестве альтернативы Вы можете использовать data-tip, чтобы указать элемент img, который будет отображаться в качестве подсказки.

Этот код центрирует всплывающую подсказку под элементом tipLink, и всплывающие подсказки правильно отображаются в многостолбцовых макетах как минимум на FireFox, Safari и Chrome.

Я надеюсь, что другие, кто Если вы хотите, чтобы всплывающие подсказки были доступны в многостолбцовых элементах страницы, это может оказаться полезным.