What is the best way to activate tooltip visibility on a mobile device?

I have implemented the {onmouseover} variable with the <a> tag to trigger the script function on hover. Here is an example:

<a class="tooltip" href="#" onmouseover="tooltip.pop(this, '#tip3', {sticky:true, position:0, cssClass:'no-padding'})">Lorem, ipsum.</a>

While this works well for desktop pages, it poses a challenge for mobile pages.

I am looking to switch the {onmouseover} variable to {onclick} for mobile screens (less than 768px).

Is this feasible? If so, I would appreciate any guidance on how to address this issue.

Thank you in advance.

javascripthtmljquerycss

Answer №1

When it comes to mouse interactions, the MouseOver event is essential, which you are already utilizing. However, for touch screens, make sure to incorporate the TouchStart event. Combining both of these events in your approach will help achieve the desired outcome. You can assign both event handlers to the same function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Despite using the 'img-fluid' class, the image is still not fully responsive

Despite using the img-fluid class in my img tag, I am facing an issue with image responsiveness. The image is responsive on smaller screens but loses its responsiveness after a certain screen size. I have researched solutions on How to make an image respo ...

htmlcssbootstrap-4

Struggling to adjust the size of d3 v6 in a React hooks environment?

I have been attempting to resize my SVG using the width and height from the state: const [svgWidth, setSvgWidth] = useState(350); const [svgHeight, setSvgHeight] = useState(250); useEffect(() => { const svg = d3 .select("#epi-char ...

javascriptreactjsd3.js

Using React JS to extract query string values

My current URL contains the following: http://example.com/callback?code=abcd I am trying to extract the value of "code." Here is the React code I have written: import React from 'react'; import { useEffect } from 'react'; const Callba ...

javascriptreactjsreact-hooksquery-string

JavaScript, Page Method, and GridView are essential components to creating dynamic and interactive

After learning how to use the page method in JavaScript and ASP.Net (VB.Net), I encountered an issue when trying to insert multiple items into a database using a gridview. Despite my efforts, there were no error messages appearing. Here is what I have so f ...

javascriptasp.netajaxvb.netgridview

What steps can be taken to enhance the responsiveness of this Bootstrap 4 code?

I've been trying to make this code more responsive, but I haven't found a suitable solution yet. When the browser window shrinks to mobile sizes, the list becomes too narrow and the picture/video items on the right end up small and aesthetically ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Continuously receiving the value of undefined

I am currently working on a JavaScript Backbone project and I have declared a global object as follows: window.App = { Vent: _.extend({}, Backbone.Events) } In the initialize function, I have done the following: initialize: function () { window.App ...

javascriptjquerybackbone.js

Here, it is possible for the padding-right value to be equal to zero

I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works. For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;. Therefore, the pad ...

css

Change a JSON array with dates into a date type array in JavaScript

There is an array available: var BigWordsDates = JSON.parse('<?php echo addslashes($Array_OfDates_to_json) ?>'); When inspected in FireBug DOM, it appears as: BigWordsDates Object { #Tahrir=[36], #Egypt=[24], #Morsy=[16], more...} # ...

javascriptjsond3.js

Angular modules are designed to repeat chunks of code in a

Whenever I scroll the page, my function pushes items to an array. However, I am facing an issue where the pushed items are repeating instead of adding new ones. Solution Attempt onScroll(): void { console.log('scrolled'); var i,j,newA ...

javascriptangulartypescript

Troubleshooting: Angular ng-if not correctly detecting empty strings

When looking at my code, I have the following snippet to showcase data from angular scope variables. The initial two lines are functioning correctly and displaying data from the scope variables; however, there seems to be an issue with the line using ng- ...

javascripthtmlangularjsangularjs-scope

How can I make a child of Object3d in Three.js face the camera?

One challenge I am facing involves an Object3d composed of 6 planes arranged to form a cube. After applying quaternion rotation based on mouse input and bringing the cube to a stop, my goal is to have the cube align itself directly with the camera at its c ...

htmlcanvasthree.js3d

What are the ways to ensure my query columns fill the entire page space?

Currently, when I execute a query, it retrieves the correct information. However, I want to make my columns span across the entire page instead of being centered in the middle with empty space on the sides. Is there a way to expand the columns? Below is t ...

phphtmlcssmultiple-columnsspace

What is the best way to find a specific element value and gather all following elements in a

What is the best way to retrieve elements following -p or --name within this array? ['-p', 'player', '1', '--name', 'player1', 'name'] ...

javascriptarrays

How to effectively implement console.log with JavaScript using Selenium in Python

My attempts so far: driver.execute_script("console.log('please help me see the console output')") Unfortunately, I did not get any results. ...

javascriptpythonseleniumwebdriver

Successfully resolving the API without encountering any response errors, even after sending a response

Once the data is successfully saved in the database and the image upload is completed, I am attempting to send res.json. However, I keep encountering the error message API resolved without sending a response for /api/auth/registeration, this may result in ...

javascriptnode.jsnext.jsformidable

Is the use of div:after content really affecting the width? I am having trouble getting my transition to work

Here is a simple code snippet that represents my actual code: #myDiv { background: black; color:white; float:left; min-width:45px; max-width:450px; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #myDiv:hover:after { width ...

javascripthtmlcss

Is there a way to adjust the slide length in JQuery's slideUp function using pixels? It seems like

At the bottom of a page, I have a fixed position div element. There is another div below it, but it is hidden outside of the page margins. I am attempting to slide both divs upwards so that the bottom one becomes visible (moving out of the margin). However ...

jqueryhtmlcss

Utilizing a singular JavaScript method across various form interfaces

I seem to be facing a bit of a challenge with a task I've been working on. My goal is to have multiple forms (six in total) utilize a JavaScript method that I have created. These forms contain text input values which need to be checked, then passed t ...

javascriptajaxforms

Make sure that when a user clicks on the back button in their web browser, it

Designing a file selection menu where users can choose a file and view it in a text area on a new page, allowing for text editing and saving with a click of a button. Users should be able to return to the file selection menu by simply clicking the browser ...

javascripthtmlasp.net

Threejs: Why is my Pointlight failing to illuminate my shapes?

I've been working on creating a scene with triangles in Threejs. While the BufferGeometry has helped me shape the triangles correctly, I'm facing an issue with lighting. I've tried different materials like standard, phong, and lambert, but n ...

javascriptthree.jsgraphics3d