Priyanka Priyanka - 2 months ago 5
CSS Question

Tooltip when hovered on image

I have a hoverable tool tip that works well, but I want the tool tip to be opened when I hover over the image. Right now, the tool tip is visible even if I hover over the wrapper div mentioned in the following code:



.wrapper{
position:relative;
}
.tooltip1 {
transform: none;
margin: 50px;
}

.tooltip1:hover > .tooltip1-text, .tooltip1:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}

.tooltip1 > .tooltip1-text, .tooltip1 >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #000;
background: #fff;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
border-color:black;
border:solid;
}

<div class="tooltip1 tooltip1-scroll">
<img alt="" src="../Images/TooltipImage.png" />
<div class="wrapper">
<span class="tooltip1-text">
Some text here.Some text here.Some text here.Some text here.Some text here.<br/>
Some text here.Some text here.Some text here.Some text here.Some text here.<br/>
Some text here.Some text here.Some text here.Some text here. <br/>
Some text here.Some text here.Some text here.Some text here.Some text here. <br/>
Some text here.Some text here.Some text here.Some text here.Some text here.Some text here.<br/>
Some text here.Some text here.Some text here.Some text here.Some text here. <br />

</span>

</div>
</div>





I have referred the below mentioned link for scroll able tool tip implementation.
http://stackoverflow.com/questions/29218795/scrollable-hoverable-css-tooltip-with-psuedo-elements

But the only problem as mentioned is I want the tool tip to open only when hovered on image and not on the wrapper div.

Answer

It is possible with .tooltip1 img:hover + .tooltip1-text. You set the :hover only on the image element and with the adjacent sibling combinator you can access the tooltip wrapper:

.wrapper {
  position: relative;
}
.tooltip1 {
  transform: none;
  margin: 50px;
}
.tooltip1 img:hover + .tooltip1-text,
.tooltip1 img:hover + .wrapper {
  pointer-events: auto;
  opacity: 1.0;
}
.tooltip1 > .tooltip1-text,
.tooltip1 >.wrapper {
  display: block;
  position: absolute;
  z-index: 6000;
  overflow: visible;
  padding: 5px 8px;
  margin-top: 10px;
  line-height: 16px;
  border-radius: 4px;
  text-align: left;
  color: #000;
  background: #fff;
  pointer-events: none;
  opacity: 0.0;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  border-color: black;
  border: solid;
}
<div class="tooltip1 tooltip1-scroll">
  <img alt="" src="http://placehold.it/100" />
  <div class="wrapper">
    <span class="tooltip1-text">
    Some text here.Some text here.Some text here.Some text here.Some text here.<br/>
    Some text here.Some text here.Some text here.Some text here.Some text here.<br/>
    Some text here.Some text here.Some text here.Some text here.
    </span>
  </div>
</div>

The General sibling combinator is of course also possible. See MDN for more information.