CODEWITHSUNDEEP
javascriptjqueryhtmlcss
qunz666
qunz666

Reputation: 310

How to call tooltip on click not in hover

I Work with tooltip, and I want to show tooltip message on click, not in hover.

How it's possible to modify?

My code:

.tooltip {
  position: absolute;
  top: 7px;
  margin-left: 10px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 570px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<input type="text" maxlength="8" />
<a href="#" class="tooltip">
  <img src="~/images/help-80.png" />
  <span class="tooltiptext">
     <img src="~/images/keyboard.png" /><br />
     "This is the absolute maximum size of your item. Don't worry about different configurations here."
    </span>
</a>

So as you can see message open when you hover mouse in icon, but I want click and message stay opened.

Upvotes: 1

Views: 4240

Answers (5)

Mamun
Mamun

Reputation: 68933

You can check the style property and set the style on clicking on the image.

$('.tooltip').click(function(){
  var el = $('.tooltiptext');
  el.css('visibility') == 'visible' ? 
    el.css('visibility','hidden') : 
    el.css('visibility','visible');
});
.tooltip {
  position: absolute;
  top: 7px;
  margin-left: 10px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 570px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" maxlength="8" />
<a href="#" class="tooltip">
    <img src="~/images/help-80.png" />
    <span class="tooltiptext">
        <img src="~/images/keyboard.png" /><br />
        "This is the absolute maximum size of your item. Don't worry about different configurations here."
    </span>
</a>

Upvotes: 3

Александр Кешку
Александр Кешку

Reputation: 17

$(".tooltip").click(function(){
   $(".tooltiptext").toggle();
});

Upvotes: 2

Navneet Kumar
Navneet Kumar

Reputation: 671

You can also go with bootstrap popover (https://getbootstrap.com/docs/4.1/components/popovers/). This will also give you the same result as you want.

Upvotes: 1

4b0
4b0

Reputation: 22323

Change your CSS and remove visibility: hidden; and also remove Class .tooltip:hover .toolt . Now show / hide your tooltip based on click.

$('.tooltiptext').hide();
$('.tooltip').click(function(e) {
  $('.tooltiptext').show();
});
.tooltip {
  position: absolute;
  top: 7px;
  margin-left: 10px;
}

.tooltip .tooltiptext {
  width: 570px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" maxlength="8" />
<a href="#" class="tooltip">
  <img src="~/images/help-80.png" />
  <span class="tooltiptext">
                                <img src="~/images/keyboard.png" /><br />
                                "This is the absolute maximum size of your item. Don't worry about different configurations here."
                            </span>
</a>

Upvotes: 1

OM PRAKASH
OM PRAKASH

Reputation: 393

Instead of showing .tooltiptext on hover, change it on focus.

.tooltip:focus .tooltiptext {
    visibility: visible;
}

But if you focus on the image from keyboard then also it will show up. So, if you don't want that then there is only way i.e. let jQuery handle it.

.tooltip {
  position: absolute;
  top: 7px;
  margin-left: 10px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 570px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:focus .tooltiptext {
  visibility: visible;
}
<input type="text" maxlength="8" />
<a href="#" class="tooltip">
  <img src="~/images/help-80.png" />
  <span class="tooltiptext">
    <img src="~/images/keyboard.png" /><br />
    "This is the absolute maximum size of your item. Don't worry about different configurations here."
  </span>
</a>

Upvotes: 1

Related Questions