CSS arrow on tooltip DIV

Question

I'm trying to add a centered arrow/triangle on each side of a rectangular tooltip div and I've tried applying some code from other questions and demos, but none look centered or the arrow's shadow overlaps the div. The arrow should be white with a shadow of 0 0 20px 0 rgba(0, 0, 0, 0.2);.

HTML:

<div class="tooltip cal-tooltip">
 <div class="tooltip cal-tooltip">
  <div class="cal-tooltip-cont">
    <div class="cal-tooltip-img four-three-img">
      <img src="http://placeholdit.imgix.net/~text?txtsize=75&txt=Event%20Photo&w=600&h=400" />
    </div>
    <div class="card-info">
      <h2>Wrapping related content title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
    </div>
  </div>
</div>

CSS:

.tooltip {
  position: absolute;
  top: 0;
  z-index: 1;
  background-color: white;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}
.tooltip > div {
  padding: 15px;
}
.tooltip > div img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cal-tooltip {
  width: 20em;
  cursor: auto;
}
.cal-tooltip .cal-tooltip-cont {
  display: flex;
}
.cal-tooltip .cal-tooltip-cont > div {
  flex-basis: 50%;
}
.cal-tooltip .cal-tooltip-cont > div:nth-child(1) {
  padding-right: 5px;
}
.cal-tooltip .cal-tooltip-cont > div:nth-child(2) {
  padding-left: 5px;
}
.cal-tooltip .cal-tooltip-cont > div h2 {
  padding-bottom: 5px;
  font-size: 1em;
}
.cal-tooltip .cal-tooltip-cont > div h3 {
  font-size: .85em;
}

Demo: http://codepen.io/ourcore/pen/Lxeapj

This question looks like a lot of other question about arrow shapes. Did you look answers here on Stack Overflow? Like this: stackoverflow.com/questions/5623072/… ? — Persijn
– Persijn, Commented Jan 31, 2017 at 12:48

Ryan Munger · Accepted Answer · 2017-01-31 02:10:10Z

3

Try something like this:

.tooltip {
  position: absolute;
  top: 20px;
  left: 60px;
  z-index: 1;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
  width: 17em;
  padding: 15px;
}

.tooltip:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -1em;
  margin-top: -1em;
  left: 100%; /* change to 0% for left arrow */
  top: 50%;
  box-sizing: border-box;
  border: 1em solid black;
  border-color: transparent transparent #fff #fff;
  transform-origin: 50% 50%;
  transform: rotate(-135deg); /* change to 45 deg for left arrow */
  box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.1);  
}

.card {
  display: flex;  
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card > div {
  flex-basis: 50%;  
}

.card-info {
  padding-left: 15px;  
}

<div class="tooltip">
  <div class="card">
    <div class="card-image">
      <img src="http://placeholdit.imgix.net/~text?txtsize=75&txt=Event%20Photo&w=600&h=400" />
    </div>
    <div class="card-info">
      <h2>Test title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
    </div>
  </div>
</div>

Inspired by this: https://codepen.io/ryanmcnz/pen/JDLhu

It's a start at least. Hope it helps!

edited Jan 31, 2017 at 2:10

answered Jan 31, 2017 at 1:49

Ryan Munger

1486 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mario Parra Over a year ago

Definitely does. Thanks!

Collectives™ on Stack Overflow

CSS arrow on tooltip DIV

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related