Align an element to the right of its parent that is floated left

Question

I want a tooltip above some left-floated elements. I want some of the toolips left-aligned to the left margin of their sibling and some of the right-aligned to the right margin of their tooltips. I can't figure out how to get the elements to right align relative to the left floated sibling.

Below is the code I've tried. I've tried to get the tooltips on the green and blue segments to align to the right of the coloured segments rather than the left but it doesn't work.

.textContent {
  margin: 5px  0;
}
.bar {
	box-sizing: border-box;
	cursor: default;
	height: 10px;
  overflow: visible;
	width: 100%;
}
.segment {
	cursor: pointer;
	display: inline-block;
	float: left;
  height: inherit;
	position: relative;
  width: 20%;
}
.section1 {
  background-color: red;
}
.section2 {
  background-color: orange;
}
.section3 {
  background-color: yellow;
}
.section4 {
  background-color: green;
}
.section5 {
  background-color: blue;
}
.segment .tooltip {
	background-color: #ffffff;
	border: 1px solid #cc0000;
	border-radius: 5px;
	color: #000000;
	float: left;
	margin-top: 15px;
	padding: 5px;
	position: absolute;
	text-align: center;
	visibility: hidden;
	z-index: 1;
}
.alignRightTooltip {
  float: right;
}
.segment:hover .tooltip {
  visibility: visible;
}

<DIV class="textContent">
  Hover over bar to display tooltips
</DIV>
<DIV class="textContent">
  The tooltips on the <SPAN style="color: green; font-weight: bold">green</SPAN> and <SPAN style="color: blue; font-weight: bold">blue</SPAN> bars should align to the right hand side of the segments
</DIV>
<DIV class="bar">
  <DIV class="segment section1">
    <SPAN class="tooltip">
      section1
    </SPAN>
  </DIV>
  <DIV class="segment section2">
    <SPAN class="tooltip">
      section2
    </SPAN>
  </DIV>
  <DIV class="segment section3">
    <SPAN class="tooltip">
      section3
    </SPAN>
  </DIV>
  <DIV class="segment section4">
    <SPAN class="tooltip alignRightTooltip">
      section4
    </SPAN>
  </DIV>
  <DIV class="segment section5">
    <SPAN class="tooltip alignRightTooltip">
      section5
    </SPAN>
  </DIV>
</DIV>

I'd appreciate any feedback, unsure what I'm doing wrong.

Thanks!

Answer 1

Add the below css to your code to align the tooltips to the right side

  .segment.section4 .tooltip, .segment.section5 .tooltip {
        right: 0;
    }

Working Demo

.textContent {
  margin: 5px 0;
}

.bar {
  box-sizing: border-box;
  cursor: default;
  height: 10px;
  overflow: visible;
  width: 100%;
}

.segment {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: inherit;
  position: relative;
  width: 20%;
}

.section1 {
  background-color: red;
}

.section2 {
  background-color: orange;
}

.section3 {
  background-color: yellow;
}

.section4 {
  background-color: green;
}

.section5 {
  background-color: blue;
}

.segment .tooltip {
  background-color: #ffffff;
  border: 1px solid #cc0000;
  border-radius: 5px;
  color: #000000;
  float: left;
  margin-top: 15px;
  padding: 5px;
  position: absolute;
  text-align: center;
  visibility: hidden;
  z-index: 1;
}

.alignRightTooltip {
  float: right;
}

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

.segment.section4 .tooltip,
.segment.section5 .tooltip {
  right: 0;
}

<DIV class="textContent">
  Hover over bar to display tooltips
</DIV>
<DIV class="textContent">
  The tooltips on the
  <SPAN style="color: green; font-weight: bold">green</SPAN> and
  <SPAN style="color: blue; font-weight: bold">blue</SPAN> bars should align to the right hand side of the segments
</DIV>
<DIV class="bar">
  <DIV class="segment section1">
    <SPAN class="tooltip">
      section1
    </SPAN>
  </DIV>
  <DIV class="segment section2">
    <SPAN class="tooltip">
      section2
    </SPAN>
  </DIV>
  <DIV class="segment section3">
    <SPAN class="tooltip">
      section3
    </SPAN>
  </DIV>
  <DIV class="segment section4">
    <SPAN class="tooltip alignRightTooltip">
      section4
    </SPAN>
  </DIV>
  <DIV class="segment section5">
    <SPAN class="tooltip alignRightTooltip">
      section5
    </SPAN>
  </DIV>
</DIV>

Answer 2

Please check if this is what you were expecting and mark this as right answer if this solves your purpose

.textContent {
  margin: 5px  0;
}
.bar {
	box-sizing: border-box;
	cursor: default;
	height: 10px;
  overflow: visible;
	width: 100%;
}
.segment {
	cursor: pointer;
	display: inline-block;
	float: left;
  height: inherit;
	position: relative;
  width: 20%;
}
.section1 {
  background-color: red;
}
.section2 {
  background-color: orange;
}
.section3 {
  background-color: yellow;
}
.section4 {
  background-color: green;
}
.section5 {
  background-color: blue;
}
.segment .tooltip {
	background-color: #ffffff;
	border: 1px solid #cc0000;
	border-radius: 5px;
	color: #000000;
	margin-top: 15px;
	padding: 5px;
	position: relative;
	text-align: center;
	visibility: hidden;
	z-index: 1;
}
.segment:hover .tooltip {
  visibility: visible;
  float:right;
}
.segment:hover .tooltipLeft {
  visibility: visible;
  float:left !important;
}

<DIV class="textContent">
  Hover over bar to display tooltips
</DIV>
<DIV class="textContent">
  The tooltips on the <SPAN style="color: green; font-weight: bold">green</SPAN> and <SPAN style="color: blue; font-weight: bold">blue</SPAN> bars should align to the right hand side of the segments
</DIV>
<DIV class="bar">
  <DIV class="segment section1">
    <SPAN class="tooltip tooltipLeft ">
      section1
    </SPAN>
  </DIV>
  <DIV class="segment section2">
    <SPAN class="tooltip tooltipLeft ">
      section2
    </SPAN>
  </DIV>
  <DIV class="segment section3">
    <SPAN class="tooltip tooltipLeft ">
      section3
    </SPAN>
  </DIV>
  <DIV class="segment section4">
    <SPAN class="tooltip">
      section4
    </SPAN>
  </DIV>
  <DIV class="segment section5">
    <SPAN class="tooltip">
      section5
    </SPAN>
  </DIV>
</DIV>

Answer 3

Plz try this code.. If you want right alignment for tooltip, plz add "right-align" class..

HTML

<DIV class="segment section4 right-align">
  <SPAN class="tooltip alignRightTooltip">
    section4
  </SPAN>
</DIV>
<DIV class="segment section5 right-align">
  <SPAN class="tooltip alignRightTooltip">
    section5
  </SPAN>
</DIV>

CSS

.segment.right-align span {
  right: 0;
}