1

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>
Paul Taylor
  • 13,411
  • 42
  • 184
  • 351

5 Answers5

1

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>
  • the above is a div with class tooltip (as opposed to a title attribute) – Yvonne Aburrow Feb 21 '18 at 13:15
  • 1
    okay so i get it, there is really no such thing as a tooltip in html but you can implement one yourself by making hidden text visible when hover event occurs on an element. – Paul Taylor Feb 22 '18 at 11:57
1

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>
Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47
  • This looks good, but can you set media screen so it works on the basis of if tablet rather than screen size. For example i have a Lenevo Yoga so this has a standard labtop screen but fails to display tooltips when in tablet mode. – Paul Taylor Feb 22 '18 at 07:40
  • ok so there are two different things - the title attribute (which is what you are calling tooltip, which will never display on a mobile device) and other ways of displaying a tooltip, such as content displayed in a pseudo-element (`::after` or `::before`). What my solution does is work around the fact that title attributes never display on mobile devices. You can set up multiple media queries for different screen widths, using both `min-width` and `max-width`. So for your Lenovo tablet example, find out its screen width & specify that in the media query. – Yvonne Aburrow Feb 22 '18 at 09:02
  • Yvonne, yes i understand, But you miss my point my Leveno has same screen size whether i tablet or regular mode, but it only doesnt work when in tablet mode. So I need to set to use a media query that recognises whether or not tablet, not based on screen size. – Paul Taylor Feb 22 '18 at 09:58
  • sadly there is no such media query. It'd be ever so useful if there was, I agree. – Yvonne Aburrow Feb 22 '18 at 10:12
  • Found this question https://stackoverflow.com/questions/32493093/can-you-detect-tablet-mode-in-edge-and-ie11-using-javascript-on-windows-10/32601200#32601200 , there is mention of identificatin a pointer device I suppose this only identifiable by Javascript – Paul Taylor Feb 22 '18 at 10:23
  • See this answer on a question about targeting media queries to specific devices: https://stackoverflow.com/a/20350990/5264501 – Yvonne Aburrow Feb 22 '18 at 10:29
  • Hmm, well that answer doesnt help at all with my Lenovo problem – Paul Taylor Feb 22 '18 at 10:41
  • No, but the point is that you are thinking about this from the wrong angle. You're thinking "title attribute is a tooltip, how do I make that work on a tablet?" whereas you should be thinking, "what should I use to provide users with extra info about my form labels that will work on all platforms?" – Yvonne Aburrow Feb 22 '18 at 10:43
  • 1
    Not sure I agree and only in the sense that I would have to do this because of the bad way html/css is implemented on different browsers and hardware. SInce the majority of my users actually use a laptop Im not keen of dumbing down my interface from the start to suit phone users ectera, and the fact remains there is a real flaw if yo cant identify if something is working in tablet mode. – Paul Taylor Feb 22 '18 at 10:50
  • 1
    Found possible way to @media (pointer:coarse) { /* Primary Input is a coarse pointer device such as touchscreen or XBox Kinect etc */ } at http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml#dynamichover – Paul Taylor Feb 22 '18 at 11:02
  • 1
    ok forgetting about difficulty of identifying tablets your solution does work but layout wise only works with some fields. I can amend this but looking at your comment about hover I think the best solution would to implement a hover tooltip which would display when held done, how I would do that ? – Paul Taylor Feb 22 '18 at 11:41
  • Ive awarded you the bounty for your help, but it seems the bests thing I can do is implement a version of Serhans answer so then it will work on desktop and molbile (if hold down label with finger.) – Paul Taylor Feb 22 '18 at 11:55
  • thanks. Yes I quite liked @Serhan's answer but still not sure what the animation was for. – Yvonne Aburrow Feb 22 '18 at 13:51
1

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 !

legend
  • 29
  • 4
  • Well there isn't any associated javascript code since on a non tablet tooltips work by just adding the ttitle attribute to the html – Paul Taylor Feb 22 '18 at 07:35
  • everyone else is referring to tooltips as `
    `s which display with CSS and/or JavaScript, whereas you @PaulTaylor are referring to the `title` attribute as a tooltip. This is why people are suggesting JS and/or CSS solutions. Title attributes just don't display on tablets.
     – Yvonne Aburrow Feb 22 '18 at 09:05
  • title is the standard mechanism for dispalyuing tooltips so it make sperfect sense for my question to only post the html even though as you say it doesnt work on tablets. – Paul Taylor Feb 22 '18 at 09:59
  • yes but a title attribute is NOT a tooltip. The reason title attributes exist at all is so that you can get more details of an image by hovering over it. The fact that they work for other elements is a bonus, but not one that you can rely on to get a consistent way of providing extra information to the user. – Yvonne Aburrow Feb 22 '18 at 10:25
  • oh didnt knwo that, really ? – Paul Taylor Feb 22 '18 at 11:01
  • well, title is a valid attribute for several elements but as you said above, tends to get implemented inconsistently across devices. – Yvonne Aburrow Feb 22 '18 at 13:52
1

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)

Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47
  • Why is the tooltip background so much larger than the text, can you fix it so it is no larger than it needs to be. – Paul Taylor Feb 22 '18 at 16:56
  • And why use Javascript instead of CSS :hover to activate, I prefer to keep Javascript to minimum ? – Paul Taylor Feb 22 '18 at 16:58
  • in that case use my other suggestion, but instead of `content: attr(title)` just put `content: "Preview only, a license is required to actually make changes"` – Yvonne Aburrow Feb 23 '18 at 09:11
0

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>
Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47