Hints time-out, remove time-out.

[KG360]

The hints have a time limitation for visibility, I believe around 8 seconds. When using longer hints, that might be too little time for some readers.

I would want them to be visible for as long as the cursor points to the hint symbol.

Does anyone on the forum have an idea how to fix it and remove the time-out?

I appreciate any tips!

Regards/KG

[autonumber]

Hi @KG360 - this is also what I want on my application. I want to increase the display time of the hints that I have in my form. However, it seems that Caspio has a default number of seconds in displaying the hints. In this case, I recreated the hint of Caspio using custom CSS coding.

Paste this code on the Label field:

<div class="tooltip"><img src="https://CASPIOURL.caspio.com/images/tooltip_icon_gray_outlined.png" ><span class="tooltiptext">Tooltip text this is a text</span> </div>

This code on the header:

<style>

.tooltip {
  position: absolute;
  display: inline-block;
margin-left: 5px;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
background-color: #484C50;
  color:  white;
  border-radius: 6px;
  padding: 5px 0px 5px 5px;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px;
font-weight: normal;
text-decoration: none;
display:block;
margin-left: 10px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

[KG360]

Thanks @autonumber! When you say 'on the Label field' - exactly where do you mean ? Where I would enter the actual hint text, or somewhere else?

[AtayBalunbalunan]

Hi @KG360, she may be referring to the below:

[Tubby]

Just sharing here, I also found a way to do this using JavaScript instead of CSS:

I used this in the Label field: <a href="#" data-bs-toggle="tooltip" title="Some text"> <img src="INSERT YOUR TOOLTIP ICON URL SOURCE"> </a>

And here is the script:
<script>
document.addEventListener("DOMContentLoaded", function(){
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function(element){
        return new bootstrap.Tooltip(element);
    });
});
</script>