CSS: The tooltip's shadow in Safari persists

In my design, I have implemented a set of 3 buttons, each with its own specific tooltip containing messages. While the functionality works flawlessly on Windows when the tooltip is displayed and hidden, I have encountered an issue on iOS, particularly in Safari. When the tooltip is active and then becomes inactive, a lingering shadow resembling the shape of the tooltip persists. You can view this issue in the image

Despite attempting various properties using -webkit-, I was unable to resolve this issue. Is there anyone who can provide assistance?

javascriptcssiosreactjssafari

Answer №1

Here are a few potential solutions to consider. When the tooltip is not active, it will simply disappear without any transition effects.

.tooltip {
  transition: visibility 0s linear;
}

.tooltip.active {
  transition: visibility 0s linear, opacity 0.3s ease;
}

.tooltip.inactive {
  visibility: hidden;
  opacity: 0;
  box-shadow: none;
  // Feel free to experiment with all of these options or just one

}

Another option to explore is adding overflow: hidden; or pointer-events: none; to the CSS for the tooltip.

Keep in mind that there may be additional variables at play that could impact the effectiveness of these solutions.

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

The navigation bar logo on my website has mysteriously vanished

Even though my main website is built with Wordpress, I decided to start a blog using Tumblr. You can visit my website here: And here is my blog: I tried to replicate the same structure of my website on my Tumblr theme. However, I encountered an issue w ...

htmlcsswordpressimagetumblr

App.js encountered an error on line 12: Uncaught TypeError - the function useState from React is not recognized or its return value is not iterable

I have been working on a project for my API Ui patterns class. The project involves pulling data from an API and rendering it through tab components. Initially, everything was populating correctly on the console and page. However, when I started working ...

reactjsapistateui-patterns

Organize the Div elements in the form of a message

Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...

htmlcsstwitter-bootstrap

Combining td elements within a table

Currently, I am working on creating a weekly calendar using a combination of JavaScript and PHP to interact with an SQL table. The process involves generating an empty table structure in JavaScript and then populating specific cells with data retrieved fro ...

javascriptphphtmlhtml-table

Guide to Embedding an Image in a List in HTML

How do I resize an image according to the size specified in CSS, and ensure that it fits within a list of items where each item consists of both an image and a name? Currently, my code only displays the image in its original size. for(var i =0; i< o ...

javascripthtmlcss

What is the best way to add attractive share buttons for Facebook, Twitter, and G+ on your

I am looking to enhance my social media share buttons on my website, similar to the ones found on YouTube: Currently, I have default buttons that are not visually appealing: <a name="fb_share" type="icon" share_url="<?php the_permalink(); ?>"> ...

htmlcssfacebooktwittergoogle-plus

Adding a number repeatedly and showing the result

I have been searching for a solution to this particular problem for quite some time now, but unfortunately, I haven't been able to find one yet. It would be incredibly helpful if someone could guide me in the right direction. Let's say we start ...

javascriptphpjqueryajax

Acquire an array of Worksheet names in JavaScript by utilizing ActiveX

How can I retrieve a comprehensive list of all available sheet names from my Excel file using the ActiveX Object? I am aware that the code Excel.ActiveWorkBook.Sheets provides access to the sheets. However, how do I obtain an array containing the NAMES of ...

javascriptexcelactivexactivexobject

What is the best way to incorporate custom data into react-table?

After following the example at while using react-table, everything worked as expected. However, when attempting to use my own data, I encountered an issue where I kept receiving a TypeError stating that 'data is undefined' in useTable. Even thou ...

arraysreactjsreact-hooksmemoizationreact-table

Wheelnav.js implementing a dynamic bouncing animation

I'm currently in the process of working on a pie menu with wheelnav.js and everything is going smoothly so far. However, I can't seem to find any information in the wheelnav.js documentation on how to eliminate the bouncing effect when a menu cho ...

javascripthtmluser-interfacewheelnav.js

Do not trigger navigation on click for the element enclosed within <Link></Link> tags

Is it possible to implement a functionality where clicking on a div, wrapped in react-router-dom tags, will navigate to the established path, but if the click target is a delete button within that div, the navigation should be bypassed and only the onCli ...

reactjsreact-router-dom

Progress bar for Ajax loading with an extensive list

Is there a way to create a progress bar that shows the real-time status of loading a large JSON list using an AJAX call? For example, displaying a message like "1 out of 200 loaded." Currently, my AJAX call is quite simple: function SendAjax(urlMethod, j ...

javascriptjqueryajaxasp.net-mvc

Requirements detailed in package.json

Suppose we have a client-side application (such as an Ember app). We define the package.json file for our application with its dependencies listed. { name: "my-app", dependencies: { "dep1" : "1.0.0" }, devDependencies: { ...

javascriptnode.jsnpmbower

Incorporate Vue into a template using variables and props

Currently in the process of building a vue app and wondering how I can seamlessly integrate it into a template while passing variables (props) into it. When I execute npm run dev, the app and all its components are coded with no issues. After running npm ...

javascriptvue.js

Troubleshooting Problem with Responsive Layout and Embedded YouTube Video

Before I dive into this, I want to acknowledge that I understand my coding practices for this project are not up to par. I have been under time constraints to finish this project quickly (as a favor) and plan to address these issues at a later time. On my ...

phphtmlcssyoutuberesponsive-design

Looking to ensure that the blockquote element is placed on its own separate line?

We are attempting to ensure that our blockquote element appears on a separate line. Despite trying both clear:both and display:block CSS properties, we have not noticed any changes. Our target browsers are IE7 and Firefox 3. Any assistance would be great ...

htmlcss

NextJS Facing a Challenge with Webpack Module Federation in React Implementation

I need to run a react app within a NextJS host app as well as on its own. After reviewing the NextJS example at https://github.com/module-federation/module-federation-examples/tree/master/nextjs-react, I came across some important notes: NOTE: Omitting v ...

reactjsnext.jswebpack-module-federation

JavaScript Ext is not declared

I've designed a webpage with tabs, and everything was working fine in our development environment. However, when we moved it to the staging environment, we started experiencing errors this morning that I'm not sure how to resolve as my JavaScript ...

javascriptdom-events

Is it necessary to confirm the validity of url.format(urlObject)?

I have been exploring the NodeJS URL API and am particularly interested in the url.format(urlObject) method. My goal is to develop a function that first validates the urlObject before using the format function, and throws a TypeError if any of the key/valu ...

javascriptnode.jsvalidationtypesschema

The Everyday Explanation of Same Origin Policy

Could anyone simplify the concept of the Same Origin Policy for me? I've come across various explanations but I'm in search of one that a child can easily understand. I found this link to be quite helpful. Is there anyone who can provide further ...

javascripthtmlsame-origin-policy