How do i add a Mouse Over Tooltip to the icons in HTML

user_13867204 0
Viewed 197

I have tried to add a mouse over tooltip to the icons, but they disappear anytime i create the Style .ion-android-hand:before { I believe there is something i am missing, can anyone help me out on this?

.ion-android-hand: {
  visibility: visible;
  cursor: pointer;
}

.ion-android-hand:before {
  content: attr(data-text);
  background-color: rgba(0, 0, 0, 0.8);
  width: 14%;
  left: 70%;
  margin-left: 100px;
  height: 10%;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  display: block;
  z-index: 1;
  padding: 10px;
  font-size: 80%;
  font-style: normal;
  position: absolute;
  margin-top: 35px;
  cursor: pointer;
}
<div class="wash-icons">
  <i class="ion-android-hand" data-text="Hand free triggering system"></i>

I have tried to add a mouse over tooltip to the icons, but they disappear anytime i create the Style .ion-android-hand:before { I believe there is something i am missing, can anyone help me out on this?

tooltip css html
2 Answers

I dont know if this will help you but it is a start based on what I understood from your problem.

Hover the red square As it is going to be use for phone I recommand using :focus as well as :hover as there is no mouse on phone. Hover do not work correctly on phones

.wash-icons{
  width: 20px;
  height:20px;
  background:red;
}
.wash-icons .ion-android-hand{
  visibility: hidden;
}
.wash-icons:hover .ion-android-hand, .wash-icons:focus .ion-android-hand {
  visibility: visible;
  cursor: pointer;
}

.ion-android-hand:before {
  content: attr(data-text);
  background-color: rgba(0, 0, 0, 0.8);
  /*width: 14%;*/
  left: 0%;
  margin-left: 20px;
  /*height: 10%;*/
  color: #fff;
  text-align: center;
  border-radius: 5px;
  display: block;
  z-index: 1;
  padding: 10px;
  font-size: 80%;
  font-style: normal;
  position: absolute;
  margin-top: 35px;
  cursor: pointer;
}
<div class="wash-icons">
  <i class="ion-android-hand" data-text="Hand free triggering system"></i>
</div>

Edit: Process of the correction

  1. Set visibility of .ion-android-hand to visibility: hidden; by default
  2. Change the visibility to visibile when hover its parent .wash-icons

So hover parent show your "i"

user_110445420

Please hover green circle to see the tooltip

First set visibility:hidden; to .ion-android-hand

.ion-android-hand{
     visibility:hidden;
}

Then :hover the wash-icons to visible (Mobile phone not hover try :focus instead)

.wash-icons:hover .ion-android-hand,
.wash-icons:focus .ion-android-hand{
  visibility: visible;
}

Also added some style to wash-icons for green circle.

.wash-icons{
  background:#00cc00;
  border-radius:30px;
  width:60px;
  height:60px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ion-android-hand:before {
  content: attr(data-text);
  background-color: rgba(0, 0, 0, 0.8);
  width: 100px;
  left: 0;
  height: 50px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  display: block;
  z-index: 1;
  padding: 10px;
  font-size: 80%;
  font-style: normal;
  position: absolute;
  margin-top: 35px;
  cursor: pointer;
}
.ion-android-hand{
  visibility: hidden;
  cursor: pointer;
}
.wash-icons:hover .ion-android-hand,
.wash-icons:focus .ion-android-hand{
  visibility: visible;
  cursor: pointer;
}
<div class="wash-icons">me
  <i class="ion-android-hand" data-text="Hand free triggering system"></i>
</div>

The top of Tooltip added arrow

Demo here

.wash-icons{
  background:url(https://i.stack.imgur.com/FnfUn.png);
  background-size:contain;
  border-radius:50%;
  width:40px;
  height:40px;
  padding:5px;
  position:relative;
}

.ion-android-hand:before {
  content: attr(data-text);
  background-color: rgba(0, 0, 0, 0.8);
  width: 200px;
  left: 0;
  top:calc(100% + 5px);
  height: 20px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  display: block;
  z-index: 1;
  padding: 10px;
  font-size: 80%;
  font-style: normal;
  position: absolute;
  cursor: pointer;
}
.ion-android-hand{
  visibility: hidden;
  cursor: pointer;
}

.wash-icons:hover .ion-android-hand,
.wash-icons:focus .ion-android-hand{
  visibility: visible;
  cursor: pointer;
}

.ion-android-hand::after {
  content: " ";
  position: absolute;
  top: calc(100% - 5px);
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}
<div class="wash-icons">
  <i class="ion-android-hand" data-text="This is Toolip for Android icon"></i>
</div>

user_133686580
Related