Although @Armando Jaelo already wrote a (somewhat) working answer my approach is a little different and my code differs.
I don't like using user agent sniffing. Why has been discussed on Stack Overflow already (click):
-
User agent sniffing is a very noddy detection technique, user agent strings are a constant moving target, they should not be trusted alone. People up-voting this post should consider researching more.
-
One of the problems with sniffing for just specific devices out of the user agent is that you have to remember to update your detection when new devices come out. This isn't an ideal solution.
-
The Dolphin browser on android does not send any of those strings!
- ...
There are also problems with notebooks with touch function. I own a Surface myself and your approach won't work for me as my user agent will be Windows even though I am using the touchscreen.
I think my point is clear.
So what are other approaches?
Well you could try to detect a touch screen. This is a solution that has problems but not as much as user agent sniffing as you can also include notebooks. It also has been discussed in this thread.
But it doesn't come without problems.
Using media queries is also not a good approach (although the cleanest) because you will still run into trouble with notebooks.
Doesn't look good so far, does it?
You should think about what you need or not. In general, it is best practice to not add or remove specific functions depending on their device. You should ask yourself if it is really necessary to close it on a second click. Why don't you make a close button and remove the hover function for desktop and mobile like this:
$(".open, .close-button").click(function() {
$(".tooltip-content").toggle();
switch ($(".tooltip-content").is(":visible")) {
case true:
$(".open").text("Close Tooltip");
break;
case false:
$(".open").text("Open Tooltip");
break;
}
});
.tooltip-content {
background: black;
color: white;
display: none;
max-width: 360px;
min-width: 210px;
padding: 5px 10px;
z-index: 100;
text-align: center;
margin-top: 8px;
position: relative;
}
.close-button {
position: absolute;
color: white;
top: 0;
right: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-btn-tooltip">
<button class="open">Open Tooltip</button>
<div class="tooltip">
<div class="tooltip-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<div class="close-button">x close</div>
</div>
</div>
</div>
Or just leave it as it is. The only feature you will miss is that you can't close it by clicking twice.
But, in case you don't care about all this I will leave you with the better designed code (which is basically Armando's code):
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(".hover-a").removeClass("hover-a");
var hide = () => {
$(".tooltip-content").hide();
$(".open").text("Open Tooltip");
};
$(document).click(() => {
if ($(event.target).hasClass("open")) {
switch ($(".tooltip-content").is(":visible")) {
case true:
hide();
break;
case false:
$(".tooltip-content").show();
$(".open").text("Hide Tooltip");
break;
}
} else {
if (!$(event.target).parents('.container-btn-tooltip').length) {
hide();
}
}
});
}
.tooltip-content {
background: black;
color: white;
display: none;
max-width: 360px;
min-width: 210px;
padding: 5px 10px;
z-index: 100;
text-align: center;
margin-top: 8px;
}
.container-btn-tooltip.hover-a:hover .tooltip-content {
display: block;
}
<div class="container-btn-tooltip hover-a">
<button class="open">Open Tooltip</button>
<div class="tooltip">
<div class="tooltip-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
</div>
</div>
</div>
This is fully functional but uses user agent sniffing.
If you have any questions, let me know!
