Silverterra 3d blog

Goal: find simple way to hide the tooltip

The problem is very simple and there are many ways to solve. I have a button or link or just a simple div with a tooltip on it. I want to create a disabled state for this control.
the object like this

<div class="jumper" title="jump back"> < </div>

and the style for the disabled state.

.jumper.disabled {
  color: #ddd;
  text-shadow: 1px 1px 1px #fff;
  background-color: #eee;
}

Only one more thing left. How can I hide the tooltip defined by the title attribute. The quickest way with css is the following

.jumper.disabledcorrect {
  color: #ddd;
  text-shadow: 1px 1px 1px #fff;
  background-color: #eee;
  pointer-events: none;
}

the tricky part is: pointer-events: none; <--- no pointer events? no mouse action -> no tooltip – great, enjoy

Friday, October 13th, 2017 at 19:04.
Filed under css, tricky.