Using CSS Tooltips in a Multiple-Column DIV

Question

I need to display tooltips for specific terms in a multiple-column div, and I need them to work across multiple browsers. I began with the w3schools CSS Tooltip example, which works great in a normal (single-column) container. But with multiple columns, Chrome has some serious (perhaps not deal-breaking) formatting issues, and Safari fails badly, cropping the tooltip to the column in which it should appear. Firefox works properly.

Firefox:

Chrome:

Safari:

I thought perhaps Safari was treating overflow as though it were set to hidden, but if so, I couldn't find any way to change its behavior. And I couldn't find any existing questions that address tooltip formatting problems in multi-column layouts.

Now I'm worried that I may have to bite the bullet and write the custom javascript to detect hover, grab the text of the tooltip, stuff the text into a div that floats above the content of my page, reveal the div properly positioned in relation to the link, and hide it again when the mouse moves off the link. Obviously, it would be a lot easier if I could make the w3schools tooltip code work with multiple columns. (Using a table or grid in place of multiple columns is not an for this project.)

Has anyone else encountered (and hopefully solved) this issue?

Here's my code; if you run the snippet you'll see that the upper div shows a normal single-column div that works fine across browsers; the lower div is the two-column div that generated the screenshots above.

/* 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>

Link to JsFiddle

Willodeanwilloughby

Answer 1

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

This can fix for the overflow part but i notice that the last item of the column, the tooltip will still go up instead of below it.

Feel like column overflow issue still haven't fix for chrome yet, maybe can try to use flex.

Corpuz

Thanks; this helps for Chrome, but doesn't seem to have any effect for Safari. Though I didn't mention it in my original post, I'm still disturbed that both Chrome and Safari add so much extra space beneath the two <p> elements in the multi-column layout. Firefox is the only one of the three that puts these two elements into two columns, which is pretty clearly the right thing to do. – Willodeanwilloughby

I'm also curious as to why backface-visibility is relevant here. The docs suggest that this setting relates only to 3D transformations. – Willodeanwilloughby

That maybe not a bug on chrome but at less they should provide the overflow control so that dev can easy to control what they want. – Corpuz

Answer 2

The incompatibilities among browsers have defeated my effort to find a css-only solution, so I bit the bullet, added a bit of javascript, and provide below a solution that works for me. This solution supports both text tooltips (which can include html markup) and picture tooltips.

	$(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>

This solution (using jQuery) shows the tooltip text when you mouse over a tipLink element, such as this span:

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

In this example, "Link" is the text on the page, and the contents of the data-tip are displayed as the tooltip when the user hovers over the word "Link".

Alternatively you can use the data-tip to specify an img element that will appear as the tip.

This code centers the tooltip below the tipLink element, and the tooltips appear properly in multi-column layouts on at least FireFox, Safari, and Chrome.

I hope others who want to make tooltips available in multi-column page elements may find this useful.

Willodeanwilloughby