1

I'm designing a tooltip that will appear when a user hovers over various beers. Each tooltip will have 7 key-value pairs, representing beer attributes. Here is a tooltip of one of the beers:

.tooltip {
  position: absolute;
  width: 300px;
  height: auto;
  padding: 10px;
  background-color: lightgray;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
  grid-template-areas: "attributeName attributeValue";
}

.attributeName {
  font-size: 10px;
  grid-area: attributeName;
}

.attributeValue {
  font-size: 14px;
  grid-area: attributeValue;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="tooltip">
        <p>
          <span class="attributeName">Name: </span>
          <span class="attributeValue">Totally Radler</span>
        </p>
        <p>
          <span class="attributeName">Style: </span>
          <span class="attributeValue">Radler</span>
        </p>
        <p>
          <span class="attributeName">Brewery: </span>
          <span class="attributeValue">Hopworks Urban Brewery</span>
        </p>
        <p>
          <span class="attributeName">Location: </span>
          <span class="attributeValue">Portland, Oregon</span>
        </p>
        <p>
          <span class="attributeName">Ounces: </span>
          <span class="attributeValue">16</span>
        </p>
        <p>
          <span class="attributeName">ABV: </span>
          <span class="attributeValue">2.7%</span>
        </p>
        <p>
          <span class="attributeName">IBU: </span>
          <span class="attributeValue">21</span>
        </p>
  </div>
  
</body>
</html>

I want the tooltip to have each attributeName (name, brewery, location, etc) left-aligned with each other, and I also want the attributeValues left-aligned with each other, with a small gap in between them. Here's a mockup illustrating this point better:

https://i.stack.imgur.com/zFGit.jpg

I want to use CSS Grid to achieve this, but for some reason, the code is not running as I intended. I'm not beholden to the HTML organization, as I'm generating all the code in JavaScript. I'm wondering if the nesting of the span's inside the p'sis causing the problem.

Sharon Wasker
  • 41
  • 4
InspectorDanno
  • 935
  • 2
  • 12
  • 23

2 Answers2

1

.tooltip is not the parent for the span, p should be the grid here ;)

.tooltip {
  position: absolute;
  width: 300px;
  height: auto;
  padding: 10px;
  background-color: lightgray;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  /* update to go down a level */
}

.tooltip p {
  display: grid;/* direct children will be displayed into the grid set */
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
  grid-template-areas: "attributeName attributeValue";
}
/* end update */
.attributeName {
  font-size: 10px;
  grid-area: attributeName;
}

.attributeValue {
  font-size: 14px;
  grid-area: attributeValue;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="tooltip">
    <p>
      <span class="attributeName">Name: </span>
      <span class="attributeValue">Totally Radler</span>
    </p>
    <p>
      <span class="attributeName">Style: </span>
      <span class="attributeValue">Radler</span>
    </p>
    <p>
      <span class="attributeName">Brewery: </span>
      <span class="attributeValue">Hopworks Urban Brewery</span>
    </p>
    <p>
      <span class="attributeName">Location: </span>
      <span class="attributeValue">Portland, Oregon</span>
    </p>
    <p>
      <span class="attributeName">Ounces: </span>
      <span class="attributeValue">16</span>
    </p>
    <p>
      <span class="attributeName">ABV: </span>
      <span class="attributeValue">2.7%</span>
    </p>
    <p>
      <span class="attributeName">IBU: </span>
      <span class="attributeValue">21</span>
    </p>
  </div>

</body>

</html>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

Frankly, this is a table (or at least CSS- Tables)...I don't see any need to make it more complex than that.

Plus it has support back as far as IE8.

.tooltip {
  position: absolute;
  width: 300px;
  height: auto;
  padding: 10px;
  background-color: lightgray;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  display: table;
}

p {
  display: table-row;
}

.attributeName {
  font-size: 10px;
  display: table-cell;
}

.attributeValue {
  font-size: 14px;
  display: table-cell;
}
<div class="tooltip">
  <p>
    <span class="attributeName">Name: </span>
    <span class="attributeValue">Totally Radler</span>
  </p>
  <p>
    <span class="attributeName">Style: </span>
    <span class="attributeValue">Radler</span>
  </p>
  <p>
    <span class="attributeName">Brewery: </span>
    <span class="attributeValue">Hopworks Urban Brewery</span>
  </p>
  <p>
    <span class="attributeName">Location: </span>
    <span class="attributeValue">Portland, Oregon</span>
  </p>
  <p>
    <span class="attributeName">Ounces: </span>
    <span class="attributeValue">16</span>
  </p>
  <p>
    <span class="attributeName">ABV: </span>
    <span class="attributeValue">2.7%</span>
  </p>
  <p>
    <span class="attributeName">IBU: </span>
    <span class="attributeValue">21</span>
  </p>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161