How do I make tooltips work on Webapp when running on tablet

Question

I have tooltips for all my options for both the input field itself and the associated label, but unfortunately they are not displayed on a mobile or a PC in tablet mode.

So how can i make them work, or what is the usual alternative.

I understand on a touch screen you dont have the concept of a mouse pointer hovering, but I would have though at the very least if I touched the label with my finger that would cause the tooltip to be displayed, how do I make that happen.

   <input name="preview" id="preview" type="checkbox" title="Preview only, a license is required to actually make changes" disabled="disabled">
    <label for="preview" id="previewlabel" class="label_disabled" title="Preview only, a license is required to actually make changes">
Preview only</label>

Answer 1

Try this:

  label:hover:after {
     content: "Preview only, a license is required to actually make changes";
     background-color: #333;
     color: #fff;
     display: inline;
     padding: 3px;
     border-radius: 3px;
     margin-left: 6px;
  }

label {
    padding: 3px;
     border-radius: 3px;
    display: inline-block;
} 

<input name="preview" id="preview" type="checkbox" disabled="disabled">
    <label for="preview" id="previewlabel" class="label_disabled">
Preview only</label>

Answer 2

I think the best solution would to implement a hover tooltip which would display when held done, how I would do that ?

$( document ).ready(function() {
    
    $('.show-tooltip').on('mouseover', function() {
        
        $(this).next().css('display','inline-block');
    });
       
    $('.show-tooltip').on('mouseout', function() {
        $(this).next().css('display','none');
    });
});

.triangle-isosceles.left {
    margin-left: 50px;
    background: #dedede;
}

.triangle-isosceles {
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    color: #000;
    background: #dedede;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.triangle-isosceles.left:after {
    top: 16px;
    left: -50px;
    bottom: auto;
    border-width: 10px 50px 10px 0;
    border-color: transparent #dedede;
}
.triangle-isosceles:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #dedede transparent;
    display: block;
    width: 0;
}

.tooltip {
  width: 60%;
  display: none;
}

.show-tooltip {
    padding: 35px 5px;
    display: inline-block;
}

.group {
    padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
  <input name="preview" id="preview" type="checkbox" disabled="disabled">
  <label for="preview" id="previewlabel" class="label_disabled show-tooltip">Preview only</label>
  <div class="tooltip triangle-isosceles left">Preview only, a license is required to actually make changes</div>
</div>

Speech bubble style tooltip adapted from Nicholas Gallagher

Please view the demo at full screen otherwise it looks wrong. (You will need to adjust it to fit a mobile device)

Answer 3

the only difference on hover in touch is that You have to hold down on the thing for any trigger related to it , js or css to be activated ... so it may be poor coding , speaking of which

You do realize that you haven't provided the "Tooltip"'s code itself right ? it may be a positioning problem as the tooltip may overlap the screen when appended due to the code ...

to test it out : provide a background or color change when hovered , now go on touch and see if the hover's working properly , if it did u know the hover's working ... but the tooltip isn't , so provide the code . If it didnt however then again .... provide the code !

Answer 4

The media query in my CSS is designed to make it work only on the smaller screens found on mobile devices.

It then takes the content of the title attribute and displays it after the label. (You can add any formatting you like to this - padding, margin, rounded corners etc.)

[click on 'Run code snippet' then 'full page' and then resize the browser window to less than 768px wide to see this working properly.]

@media screen and (max-width: 768px) {
  label:after {
     content: attr(title);
     background-color: #333;
     color: #fff;
     display: block;
     margin-top: 2px;
  }
}

<input name="preview" id="preview" type="checkbox" title="Preview only, a license is required to actually make changes" disabled="disabled">
    <label for="preview" id="previewlabel" class="label_disabled" title="Preview only, a license is required to actually make changes">
Preview only</label>

Answer 5

You can change positioning and use with your code.

* {
  transition: 0.5s;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

p, h1 {
  margin: 0;
}

.wrapper {
  position: relative;
}

.tooltip {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 1000px;
  max-width: 50vw;
  opacity: 0;
  background: #333;
  padding: 5px;
  color: #eee;
  border-radius: 5px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  top: 150%;
}

.arrow {
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-bottom-color: #333;
  position: absolute;
  top: -30px;
  align-self: center;
}

.wrapper:hover .tooltip {
  opacity: 1;
}

<div class="wrapper">
  <h1 class="text">Hover on Pc</h1>
  <p>(Click Here Mobile)</p>
  <div class="tooltip">
    <div class="arrow"></div>
    <p class="tooltip_text">This is the tooltip</p>
  </div>
</div>