On hover Bargraph should show a div just like tooltip or popover

I am making a graph in that on hover of every graph bar should show a div. I dont want to use bootstrap tooltip or popover because I want to call dynamic value in that div.

I have made a class=“abc” in that I need to call this custom made tooltip/popover container.

my div should look like this…

There are too many questions to give a proper answer but you can make a tooltip show in your example like this.

  <div class="charts__chart chart--p100 chart--hover">
    <span class="charts__percent"></span>
    <div class="abc">ht</div>
  </div>

You had the div inside the span but that is not allowed so i moved it outside. It is better outside because you are using the empty:selector to add the percentage and that wont work if something is inside the span.

The css you need to show on hover would be like this:

.charts__chart{position:relative;}
.abc{
	position:absolute;
	left:-99em;
	transition:all .3s ease;
	font-size:1rem;
}
.charts__chart:hover{z-index:2;}
.charts__chart:hover .abc{
	left:auto;
	top:0;
	width:100px;
	height:100px;
	border:1px solid red;
	background:#fff;
	color:#000;
}
.abc:before{
	content:"";
	display:block;
	position:absolute;
	bottom:-10px;
	left:8px;
	width: 0; 
  	height: 0; 
  	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-top: 10px solid red;
}
.abc:after{
	content:"";
	display:block;
	position:absolute;
	bottom:-9px;
	left:8px;
	width: 0; 
  	height: 0; 
  	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-top: 10px solid #fff;
}

The tooltip is placed in relation to the bar that is hovered bit if you wanted it in relation to the whole graph then you would need to move the position:relative to the main container of the graph instead.

There are also issues and decisions about how much content you will have and whether the tooltip is fixed width and height or reliant on content etc.

It looks as though you have grabbed that code from somewhere else as it has some sophistication but seems overkill especially if you are going to write dynamic data into the tooltips. Rather than setting hundreds of default classes you could have written dynamically into the bar using an inline style to add the percent or set the height.

Of course there are a hundred other questions that may follow but the above should give you a start.

Thanks Paul,

You are right I got this code, and it is exactly the same as I was searching for my graph except some changes like above tooltip…

I tried your code, the tooltip is coming in middle of the bar I need that always top of the bar by default, I gave top:0; to class=“abc” but it doesn’t work for me…

Thanks once again for your reply…

Do you mean at the top of the current bar or at the top of the whole graph?

If so then do you want the bottom of the tooltip at the top of the bar which means that the tooltip may then be on top of something that is above the graph assuming the graph isn;t at the top of the viewport or the tooltip goes beyond the top of the page and you won;t see it?

As I said in my other post there are a lot of questions to answer first before you can start to code this properly.

You can make the tooltip appear at the top of the bar by using bottom:100% instead.

e.g.

.charts__chart:hover .abc{
	left:auto;
	bottom:100%;
	width:100px;
	height:100px;
	border:1px solid red;
	background:#fff;
	color:#000;
}

However you would need to ensure that there is space above the graph or the tooltip will disappear above the viewport top. You could pad the top of the graph to start with to preserve some space or if there is content above the graph you should be ok.

e.g.Full example:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.