javascriptbootstrap-4bootstrap-datepickerjquery-ui-tooltip

How can I remove the tooltip that shows the last used dates on bootstrap?


I created a datepicker with bootstrap. It works mostly as I want it to, but everytime I click on the field it shows me the last years I have chosen. This blocks the calendar view and is also not really useful..

Here is part of my script thus far. see also the picture for what I see.

Annoying tooltip

<div class="bootstrap-iso">
        <div class="container-fluid">
          <div class="row"> 
            <div class="col-md-2"> <!-- Datepicker column -->
              <form method="post" id="date-form">
                <div class="form-group"> <!-- Date input 1-->
                  <label class="control-label" for="date">Start Date</label>
                  <input type="text" class="form-control" name="startDateN" id="startDate" placeholder="From" />
                </div>
                <div class="form-group"> <!-- Date input 2-->
                  <label class="control-label" for="date">End Date</label>
                  <input type="text" class="form-control" name="endDateN" id="endDate" placeholder="To" />
                </div>
                <div class="form-group"> <!-- Submit button -->
                  <button class="btn btn-primary " name="submit" type="submit">Submit</button>
                </div>
              </form>
            </div>

<div class="col-md-10"> <!-- Here comes the graph and the xAxis chooser -->
              <div id="plot-wrapper" style="position: relative; overflow: visible; margin: 10px;">
                <svg id="plotSVG" width="100%" height=400px></svg>
                <select id="select-x-var" style="position: absolute; bottom:0px; left: 670px;">
                  <option value="jastimmen" selected>% Ja-Stimmen</option>
                  <option value="thema">Thema</option>
                  <option value="unterthema">Unterthema</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

<!-- Datapicker -->
      <script>
          $(document).ready(function(){
              var date_input=$('input[name="startDateN"]'); //our date input has the name "startDateN"
              var date_input1=$('input[name="endDateN"]'); //our date input has the name "endDateN"
              var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
              var from={
                  format: "yyyy",
                  viewMode: "years", 
                  minViewMode: "years",
                  autoclose:true,
                  showTooltip: false,
                  startView: 2,
                  defaultViewDate: {
                      year: '2000'
                  },
                  startDate: '-148y', //2023-1875
                  endDate: '+0y', //2023
                  todayBtn: false  
              };
  
              var to={
              format: "yyyy",
              viewMode: "years", 
              minViewMode: "years",
              autoclose:true,
              startView: 2,
              defaultViewDate: {
                  year: '2000'
              },
              startDate: date_input.val(), // Set the start date of "to" datepicker to the selected year from "from" datepicker
              endDate: '+0y' //2023
              };
  
              date_input.datepicker(from).on('changeDate', function(selected){
                  // Update the start date of the "to" datepicker when a new year is selected in the "from" datepicker
                  to.startDate = new Date(selected.date.getFullYear(), 0, 1);
                  date_input1.datepicker('setStartDate', to.startDate); // Update the "to" datepicker with the new start date
              });
              date_input1.datepicker(to);
          })
  
          // Get the submit button element
          const submitBtn = document.querySelector('button[type="submit"]');
  
          // Add an event listener to the submit button
          submitBtn.addEventListener('click', function(e) {
          e.preventDefault(); // Prevent the default form submission
  
          // Get the values of the datepickers
          const startDate = document.querySelector('input[name="startDateN"]').value;
          const endDate = document.querySelector('input[name="endDateN"]').value;
  
          // Do something with the startDate and endDate variables
          testing(startDate, endDate);
          });
      </script>
      </div>

I tried to add showTooltip: false,

and also

beforeShowDay: function(date){
      return {
        tooltip: false
      }
    }

but neither has worked at all. (I also don't understand the second one, but I turned to chatgpt in desperation and this is what I got)


Solution

  • Adriaan, I believe this tooltip that appears to you is just a list of browser suggestions for your input.

    Try set this param on your input field autocomplete="off":

    <input type="text" class="form-control" name="startDateN" id="startDate" placeholder="From" autocomplete="off" />
    

    You can try set also in JS:

    date_input.autocomplete = 'off';