trigger tooltip on button based on search field value

user_5534469 0
Viewed 237

I want to show a tooltip on the button as long as the search field is empty.

what I have tried:

// 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 problem with this implementation is it works only the first time. I mean, if I write something in the search field and hover over the button the tooltip is not visible and that is what I want. but the problem is If I make the search field empty and hover over the button, the tooltip is not visible.

so, it works only the first time. how can I fix it?

tooltip css jquery javascript
2 Answers

You can initialize your tipso plugin on page load. Then , you can simply use tipso('show') or tipso('hide') depending on the condition to hide/show tooltip .

Demo Code :

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

user_106064000

I believe it would be better to evaluate the emptiness of the textbox, as that's what triggers the effect of the tooltip.

I wrote this code to show you what I mean:

function textboxChanged(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 */
.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 */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.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 when you mouse over the tooltip container */
.tooltip:hover .tooltiptext.visible {
  visibility: visible;
  opacity: 1;
}
<input type="text" placeholder="Write something, dude" onchange="textboxChanged(this)"/>
<button class="tooltip" >
  ¡Go search!
  <span class="tooltiptext visible">Hey! you missed something!</span>
</button>

As you are going to use jQuery Tipso, I'd suggest you to create a variable to store if the box is empty or not, and then, access it on your mouseover function.

NOTE: I took the CSS for the tooltip from https://www.w3schools.com/howto/howto_css_tooltip.asp

Regards!

user_113837700
Related