is it possible to get hover effects on mobile devices?

[tazarbm]

Hey guys!

I have a (seemingly retarded) question, but I choose to be considered retarded in this regard but find out a definitive answer to this question than not asking it but continuously regretting it moving forward, so please answer this if you know the answer...

Can I make it possible (maybe via a plugin, or shortcodes, or in whichever other way?) for my website's visitors to hover over text so they can see a thumbnail of what the hovered over text represents? Think of a table that lists the prices for all BMW models, but in order to keep the table simple and clean I'd like to remove the column that shows an image of each BMW model whose price I'm listing, and have the image of that BMW model appear as a popup / lightbox / whatever the hell it's called when people hover over the name of that model.

For desktop this is probably easy to do with Wordpress plugins, but I'm not sure that it's possible to do it for mobile devices since there's no mouse cursor to trigger the hovering effect, which is why I'm asking...

Please let me know!

 

[tazarbm]

After trying out a few plugins for hovering effects and shortcodes I realized that what I'm actually looking for is a plugin that creates tooltips and inside of the tooltip it should be allowed HTML so that I can link to images in my site's media library.

I tried the Hover Effects Ultimate and Shortcodes Ultimate plugins but neither did the trick... or maybe I couldn't figure out how to do it, because I need to create stuff within stuff within stuff, something like put image inside of tooltip inside of hovering effect inside of table... pretty mind blowing stuff, I know, but it's what needs to be done

Can anyone still suggest a solution? Or am I complicating things too much?

 

[Thunder Digitals]

I think elementor pro could help you out with this.

 

[tazarbm]

I think elementor pro could help you out with this.

elementor (well, site builders in general) bloats the site, so I'm trying to stay away from them. Thanks for the recommendation nonetheless, I appreciate it

 

[armenkozlowski]

Have your tried tippy js?

 

[Thunder Digitals]

elementor (well, site builders in general) bloats the site, so I'm trying to stay away from them. Thanks for the recommendation nonetheless, I appreciate it

Yeah, it could make your site heavier.

 

[Gogol]

This cannot be done. There is no mouse cursor for mobile devices as you have said in your original post. You can figure out the time an user touched if you track the touchstart and touchend, and if the element touched for less time, you could take it as a hover. But a hover like the desktop is simply impossible (it may work for some tab devices though which come with a bluetooth pen, like s7 plus but that’s niche).

ps you don’t need a plugin for this.. You could do it just with some css rules.

 

[tazarbm]

Have your tried tippy js?

never heard of that. Is it a plugin, or??

This cannot be done. There is no mouse cursor for mobile devices as you have said in your original post. You can figure out the time an user touched if you track the touchstart and touchend, and if the element touched for less time, you could take it as a hover. But a hover like the desktop is simply impossible (it may work for some tab devices though which come with a bluetooth pen, like s7 plus but that’s niche)

damn, that's what I was afraid of...

ps you don’t need a plugin for this.. You could do it just with some css rules.

I mean, I would do it if I knew CSS

May I get the CSS code from you if it's not too much trouble? And where do I insert that code?

 

[Gogol]

May I get the CSS code from you if it's not too much trouble? And where do I insert that code?

It’s pretty easy.

You need to put it in your style.css. If your element’s class name is for example column, you could write

.column:hover {
text-decoration:underline;
}

etc…

It is just an example. What’s important here is the :hover selector. Add any style you want inside it, and it will be used when the element is hovered.

 

[MgicalaEarner]

Did you ask ChatGPT Xd?
Yes, it is possible to get hover effects on mobile devices. However, it is important to note that hover effects are typically triggered by the mouse cursor moving over an element on a desktop computer. On a mobile device, there is no mouse cursor, so hover effects cannot be triggered in the same way.
There are a few ways to achieve a similar effect on mobile devices:

1. Use touch events: You can use touch events such as "touchstart" and "touchend" to trigger hover effects on mobile devices. These events are triggered when the user touches the screen and releases their finger, respectively.
2. Use media queries: You can use media queries to apply different styles to your website depending on the device and its capabilities. For example, you can use a media query to apply hover effects only to devices that have a mouse cursor (e.g. desktop computers) and not to devices that do not (e.g. mobile devices).
3. Use JavaScript: You can use JavaScript to detect when a user touches the screen and then apply a hover effect to an element. This can be done using the "touchstart" and "touchend" events, as well as the "classList" API to add and remove CSS classes from elements.

Overall, it is possible to achieve hover effects on mobile devices, but it requires some extra work and consideration of the specific capabilities and limitations of different devices.

 

[tazarbm]

Did you ask ChatGPT Xd?
Yes, it is possible to get hover effects on mobile devices. However, it is important to note that hover effects are typically triggered by the mouse cursor moving over an element on a desktop computer. On a mobile device, there is no mouse cursor, so hover effects cannot be triggered in the same way.
There are a few ways to achieve a similar effect on mobile devices:

1. Use touch events: You can use touch events such as "touchstart" and "touchend" to trigger hover effects on mobile devices. These events are triggered when the user touches the screen and releases their finger, respectively.
2. Use media queries: You can use media queries to apply different styles to your website depending on the device and its capabilities. For example, you can use a media query to apply hover effects only to devices that have a mouse cursor (e.g. desktop computers) and not to devices that do not (e.g. mobile devices).
3. Use JavaScript: You can use JavaScript to detect when a user touches the screen and then apply a hover effect to an element. This can be done using the "touchstart" and "touchend" events, as well as the "classList" API to add and remove CSS classes from elements.

Overall, it is possible to achieve hover effects on mobile devices, but it requires some extra work and consideration of the specific capabilities and limitations of different devices.

nope, never tried chatGPT, and I don't think I will anytime soon because my pride doesn't allow me to become dependent on a robot

That "touchstart" thing sounds interesting, especially since I just noticed that some plugins that create hovering effects mention this in their settings... Thanks for the tip

 

[MgicalaEarner]

dependent on a robot

Everything is going to take over by AI if you don't like it then you should be ready to be switched on offline XD.

 

[tazarbm]

Everything is going to take over by AI if you don't like it then you should be ready to be switched on offline XD.

don't tempt me

 

[Developie]

If you have a wp website then elementor or any builder would be fine
or else you can use CSS but that would be a bit tricky

 

[tazarbm]

If you have a wp website then elementor or any builder would be fine
or else you can use CSS but that would be a bit tricky

I'm never going to use site builders, I can guarantee you this!

Yeah, CSS is an option but I suck at coding, so I don't know... But thanks for the tips

 

[Developie]

Appreciated!!