Tips for activating a tooltip upon clicking instead of hovering over it:

Question

Tips for activating a tooltip upon clicking instead of hovering over it:

I am currently working with tooltips and I am looking to display the tooltip message upon clicking, rather than on hover.

Is there a way to make this modification?

This is the code I have so far:

.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>

Currently, the message only appears when hovering over the icon. However, I would like it to be displayed on click and remain open.

javascript jquery html css

Answer 1

Answer №1

To change the style of an element, you can inspect the style property and apply a new style when clicking on an 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 maximum size your item can be. Different configurations are accounted for here."
    </span>
</a>

Answer 2

To change the style of an element, you can inspect the style property and apply a new style when clicking on an 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 maximum size your item can be. Different configurations are accounted for here."
    </span>
</a>

Answer 3

Answer №2

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

Answer 4

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

Answer 5

Answer №3

Make a change from displaying .tooltiptext on hover to showing it on focus.

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

However, if the image is focused using the keyboard, the tooltip will still appear. To prevent this behavior, jQuery can be used.

.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>

Answer 6

Make a change from displaying .tooltiptext on hover to showing it on focus.

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

However, if the image is focused using the keyboard, the tooltip will still appear. To prevent this behavior, jQuery can be used.

.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>

Answer 7

Answer №4

Make a modification to your CSS by eliminating the visibility: hidden; property and also remove the Class .tooltip:hover .toolt. Instead, display or hide your tooltip based on a click event.

$('.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>

Answer 8

Make a modification to your CSS by eliminating the visibility: hidden; property and also remove the Class .tooltip:hover .toolt. Instead, display or hide your tooltip based on a click event.

$('.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>

Answer 9

Answer №5

Another option is to utilize the bootstrap popover feature found at this link. By implementing this, you will achieve the desired outcome.

Answer 10

Another option is to utilize the bootstrap popover feature found at this link. By implementing this, you will achieve the desired outcome.

Tips for activating a tooltip upon clicking instead of hovering over it:

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Concealing the text input cursor (caret) from peeking through overlaid elements on Internet Explorer

Utilizing Express.js for setting up routes with a default path

Incorporating JSON data into data-groups within an Ionic application

Is there an alternative method to achieve the desired result without relying on the map() array function? What specific benefits does using the map() array method offer in this context?

Tips for swapping a component with another component in React.js without the need for a page refresh

Could the slow loading time of the React site be attributed to an overload of static assets?

Steps to dynamically modify a class upon clicking

Troubleshooting: Why is $watch failing to track changes on factory variables in Angular

Ways to modify the jquery script to display on page load rather than on scrolling action

Issue with Array.push() method resulting in undefined return value

Issues with Safari not recognizing media queries

Having trouble extracting data from a particular cell within an HTML table using jQuery

Update the page by selecting the refresh option from the drop-down menu

The animated sticky header lacks smooth animation while scrolling upwards

What is the process of retrieving data in PHP from $.post and storing it in a $variable?

Mastering the art of tab scrolling in VueJS using Bootstrap-vue

The easeInBounce function is not functioning as intended

Retrieve the row from the table using the "let" keyword

Utilizing dual <legend> elements within a fieldset

What is the best way to locate an element using text in xpath?