Activate a tooltip on the button depending on the value entered in the search field

I need to display a tooltip on the button when the search field is empty.

Here is what I have attempted:

// Enable hover feature
const searchBtn = document.querySelector('.find__btn');

searchBtn.addEventListener('mouseover', () => {
  const searchText = document.querySelector('.find__field');
  console.log(searchText.value);
  if (searchText.value.length === 0) {
    jQuery(searchBtn).tipso({
      titleContent: 'Hello',
    });
  }
});

The issue with this approach is that it only works the first time. If I type something in the search field and then hover over the button, the tooltip does not appear as expected. However, if I subsequently clear the search field and hover over the button again, the tooltip still does not show up.

So, it seems to work only the first time. How can I resolve this?

javascriptjquerycsstooltip

Answer №1

If you want to set up the tipso plugin when the page loads, you can do so easily. Then, simply utilize tipso('show') or tipso('hide') based on the condition for displaying or hiding the tooltip.

Check out this Code Demo :

$(function() {
  var searchBtn = jQuery('.find__btn');
  searchBtn.tipso({
    titleContent: 'Hello',
  });
  searchBtn.on("mouseover", function() {
    var searchText = $('.find__field').val();
    if (searchText.length === 0) {
      searchBtn.tipso('show'); //show 
    } else {
      searchBtn.tipso('hide'); //hide..
    }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.css" integrity="sha512-huSVDpZEo5Zb91YBqN03p+XP7b2S8m9nB/Pn2rbwOe0GF+jvPaFx06mexoH8lAmpa4+OEe1G4Wp3UGYcrY8V1g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.min.js" integrity="sha512-uffeXd+Tch3d7SWCkqqRg56IiDLYVnsXSJ22uDJ5DP1Nh55XphpL1BHL4c2NbpBrgmPjH4w9C9zgYQzwC8343w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<input type="text" class="find__field">
<button class="find__btn">Find..
</button>

Answer №2

In my opinion, it would be more effective to assess the content of the textbox to trigger the tooltip's display.

Below is a snippet of code that demonstrates this concept:

function checkTextbox(element)
{
    let tooltip = document.getElementsByClassName("tooltiptext")[0];
    let visibleClass = 'visible';
    if(element?.value?.length === 0)
      tooltip?.classList.add(visibleClass);
    else
      tooltip?.classList.remove(visibleClass);      
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text styles */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 160px;
  margin-left: -60px;

  /* Fade in tooltip effect */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow design */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext.visible {
  visibility: visible;
  opacity: 1;
}
<input type="text" placeholder="Type something" onchange="checkTextbox(this)"/>
<button class="tooltip" >
  Go!
  <span class="tooltiptext visible">Oops! Something missing!</span>
</button>

If you plan to utilize jQuery Tipso, consider storing a variable indicating whether the textbox is empty before accessing it within your mouseover function.

Please note: The CSS styling for the tooltip was sourced from https://www.w3schools.com/howto/howto_css_tooltip.asp

Best regards!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the browser size shrinks, turn off the drop-down navigation menu

I'm currently working on a responsive website, and I have encountered an issue with a dropdown menu. When the browser size is reduced to 900px, the menu shifts all the way to the left side. To address this, I added some left padding to keep it off the ...

htmlcssdrop-down-menuresponsive-designnav

What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

I am currently struggling with retrieving the HTML inner text value using CSS selector or XPath. While I can achieve this using document.getElementById, I am unable to do so using selectors. I can only print the tag element but not the text from it. For e ...

javascripthtmlcssxpathcss-selectors

Struggling with getting React to successfully fetch data from an Express API. Any suggestions on how

I am having trouble with my fetch call to the express API. Even though I receive a response status of 200, I am still getting the index.html instead of the JSON data I need. Here is an overview of my setup: package.json "version": "1.0.0&qu ...

javascriptreactjsexpress

Flipping a 2-dimensional box using CSS and incorporating cascading flex divs

*Please read the note: This question is a bit lengthy as I wanted to explain my thought process. For those who prefer not to read everything, I have created codepens for easy reference. Essentially, I am looking to achieve CSS box flipping effects like t ...

htmlcssanimationflexbox

What is causing my 100% height to be excessively large?

I'm facing an issue with my background containers, "background-overlay" and "background-gradient", as they are extending the height of the document beyond the actual content displayed. I am unsure of what could be causing this problem. It might be som ...

htmlcss

Verify if a personalized angular directive is able to display or conceal an element

I have a custom directive that toggles the visibility of an element based on the value of another service. I attempted to write a test to verify if the directive functions as intended. Initially, I used the ":visible" selector in my test, but it consistent ...

javascriptjqueryhtmlcssangularjs

Can you provide guidance on integrating this jQuery script into my Next.Js application effectively?

I have been using a script on a plain HTML website, importing it via the <script> tag: (function($) { var wa_time_out, wa_time_in; $(document).ready(function() { $(".wa__btn_popup").on("click", function() { if ($(&qu ...

javascriptjqueryreactjsnext.jsscript-tag

Converting line breaks into a visible string format within Angular

After thorough research, all I've come across are solutions that demonstrate how to display the newline character as a new line. I specifically aim to exhibit the "\n" as a string within an Angular view. It appears that Angular disrega ...

javascripthtmlcssangular

"The onkeydown event dynamically not triggering for children elements within a parent element that is contentEditable

Can anyone offer some insights into why this code isn't functioning as expected? My goal is to attach the listener to the children elements instead of the body so that I can later disable specific keystrokes, such as the return key. <!DOCTYPE html ...

javascripthtml

The website's navigation system effectively directs content within the initial 100% viewport

I have encountered a slight issue. I created a Sidebar Navigation with some added "hey's" to demonstrate the problem: * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } nav { height: 100vh; width: 250px; borde ...

htmlcss

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

javascriptjqueryhtmlcss

Using jQuery to set menu active states for a sprite-based navigation with distinct class names

I'm curious about how to accomplish this using JQuery. I have a menu where each item must have a unique class name in order for the CSS to properly display a sprite background position shared by all items. When an item is clicked, I also need to activ ...

jquerycss

The rendering of the .Net MVC DropDownList is not displayed properly when it is first set to be hidden

Exploring the realm of .Net MVC is a new adventure for me, and I'm hoping that resolving this issue will be straightforward. In my project, there's an HTML table row that should remain hidden upon page load but become visible once a specific opt ...

c#jquery.netmodel-view-controller

Clone all documents from a NodeJS mongoose collection and transfer them to a different server's database

I need assistance with migrating my database to a new server. My collection consists of approximately 410,000 documents, and I am looking to transfer them in batches of 100 to my new server that runs on mongodb. Below is the code I have written for this ...

javascriptnode.jsdatabasemongoose

issue with excessive content overflow

I'm working with a div structure where the outer div has the following CSS properties: position: relative; overflow: hidden; min-heigth: 450px; Inside this outer div, there is another div with the following CSS properties: position: absolute; top: ...

htmlcsslayout

The CSS file is not connecting properly despite being located within the same directory

I have double-checked that both of these files have the correct names and are in the exact same directory. However, for some mysterious reason, the CSS is not applying any styling to my page. I would greatly appreciate any assistance with this issue! Belo ...

htmlcssexpress

Shade the entire td column in different colors depending on the characteristics of th

I am working with a table and here is the code for it: <table> <thead> <tr> <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th> <th style="font-weight: bold; wi ...

javascripthtmljquerycsslaravel

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Is there a way to customize the ui-autocomplete div by adding a custom class? I have several autocomplete widgets on my webpage, and I need to style their drop-downs differently. Since editing the ui-autocomplete class directly is not an option, I am wor ...

javascriptjquerycssjquery-uiautocomplete

What is the process for uploading the product information to the database during checkout?

Everything on my e-commerce website is functioning perfectly, except for the checkout page. After the customer fills in the bill details, they should be able to place an order. The issue I am facing is that while I am able to retrieve and store the bill d ...

phpjqueryhtml

Detecting repeated keys in a query for a REST connector in loopback

Can anyone help me figure out how to duplicate parameters in a loopback REST connector query? Here's the code snippet I'm working with: details: { 'template': { 'method': 'GET', 'debug': tr ...

javascriptnode.jsrestloopbackjsstrongloop