Any suggestions for resolving issues with tipsy, SVG, and CSS on Firefox?

Having difficulty getting tipsy tooltips to display correctly next to the cursor in Firefox for my svg elements generated with d3. I discovered a patch that resolves most of the issues, which I found through this helpful answer about Tipsy tooltip positioning on d3 in Firefox and IE.

One issue I've noticed is that when using a CSS rule to create rings around specific SVG elements:

.t {
    cursor: default;
    stroke: #000000 !important;
    stroke-opacity: 0.7;
    stroke-width: 7px;
}

In Firefox version 28, tipsy places the tooltip at the top left of these elements. Is there an easy workaround or modification I can make to tipsy? Or perhaps alternative CSS that achieves the same effect?

javascriptcsssvgd3.jstipsy

Answer №1

SVG shares many properties with HTML, which can create the impression of cross-compatibility. However, through personal experience, I have discovered that despite making progress, one can encounter unexpected challenges that may lead to frustration.

The adjustment referenced in the mentioned patch involves using 'getBBox().width', a reasonable addition. Yet, upon initial inspection of tipsy, there is no explicit mention of official SVG support.

Initially, it may be advisable to opt for a tooltip plugin that offers official SVG compatibility.

However...

I noticed that the original contributor of the mentioned patch submitted a pull request, which was not merged into the main project but incorporated into another individual's fork.

This scenario prompted a comment within the issue:

"...we should incorporate it into our version considering that we mainly utilize tipsy for SVG elements."

Hence, it might be worthwhile to consider using enjalot's version of tipsy since their emphasis on SVG support appears to be paramount.

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

Importing XML data into a JavaScript variable using jQuery without displaying an alert message

Despite previously asking questions about loading XML into a JS variable, I haven't found a satisfactory solution. In my script, I declare a variable before making an ajax request and then assign the result to that variable. However, this only seems t ...

javascriptjqueryxml

Is it possible to use a Jasmine spy on a fresh instance?

In need of assistance with testing a TypeScript method (eventually testing the actual JavaScript) that I'm having trouble with. The method is quite straightforward: private static myMethod(foo: IFoo): void { let anInterestingThing = new Interesti ...

javascripttypescriptjasmine

The instance does not have a definition for the property or method "foo" that was referenced during rendering

[Vue warn]: Property or method "modelInfo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. Whenever I ...

javascriptvue.jsnuxt.js

`The header navigation is not responding to window resizing functionality`

I am currently developing a header navigation that consists of a logo on the left side, a profile icon on the right side, and some navigation links in the middle. A left slide menu has been implemented to trigger when the window width is less than 700px. ...

javascriptjqueryhtmlcss

Ways to distinguish between two div elements that have scroll bars and those that do not

I created a div with CSS styling. .comment-list { margin: 20px 0; max-height: 100px; min-height: 100px; overflow-y: scroll; width: 100%; background-color:#000; } Here is the HTML code for the div: <div class="comment-list"> </div> When the ...

javascriptjqueryhtmlcss

Is there a way to retrieve MongoDB count results in Node.js using a callback function?

Is there a way to access mongodb count results in nodejs so that the outcome can be easily retrieved by asynchronous requests? Currently, I am able to retrieve the result and update the database successfully. However, when it comes to accessing the varia ...

javascriptnode.jsmongodbasynchronous

Despite containing elements, Array.length incorrectly reports as 0 in React, JavaScript, and TypeScript

I have been working on storing persistent data for my Electron app using electron-json-storage. Initially, I tried using neDB but encountered an error, so I switched to another method. However, it seems that the issue is not with neDB but rather with my ow ...

javascriptreactjselectron

Using AngularJS to display multiple objects in the same ng-repeat loop

Is it possible to display two objects simultaneously in ng-repeat? <tr data-ng-repeat="target in targets |session in sessions |filter:query | orderBy:orderProp"> ...

javascriptangularjsangularjs-ng-repeat

Adjusting an element within an array obtained from a computed property

Within my Vuex store, I retrieve an array of rooms from a Firebase/Firestore API call. This array structure is as follows: [{label:'Kitchen', description:'...'}, ...]. To make this array accessible to my application, I utilize a Vuex ge ...

javascriptvue.jsvuejs2vuexcomputed-properties

Breaking down the jQuery datepicker into individual fields for Day, Month, and Year

Currently, I am using the Contact Form 7 plugin on my Wordpress website, which I believe uses the jQuery datepicker for its date fields (please correct me if I'm mistaken). My query is about splitting the user input box into three separate elements ( ...

javascriptjquerywordpressjquery-uidatepicker

What can you do to prevent a div from taking up the entire page if its height is not specified?

Currently, I am experiencing an issue with my layout. I have a hidden div with a fixed position that becomes visible when a button on the page is clicked. Inside this div, there is a table of buttons for the user to choose from. The problem arises when I ...

javascriptjquerycsshtml

What is Flask's approach to managing JSON data?

I am currently developing an editable table using FLASK, JSON, and jQuery. After serializing the form, I send it via $.getJSON, as shown at the bottom of my JS code: This is the JS code: $(function(){ $('tbody').on('click', &apos ...

javascriptjquerypythonjsonflask

What could be causing the ReferenceError when the Response object is not defined?

I am currently working on node.js and express. After attempting to establish a simple server, I am encountering an unexpected response error. const http = require('http'); const myServer = http.createServer(function(req, res){ res.writeHead ...

javascriptnode.jsexpress

Guide to incorporating tesseract OCR into a Cordova/Phonegap application

My attempts to use Tesseract OCR with my app have been unsuccessful despite following the instructions provided here. After inspecting the code using Google Chrome Dev console through the WebView, I encountered an error: Uncaught SyntaxError: Unexpected ...

javascriptjavacordovaocrtesseract

Creating a unique custom icon by leveraging the material UI icons - a step-by-step guide

I am looking to create an arrow graphic similar to the one shown in the image below https://i.stack.imgur.com/k9TvH.png Originally, I was able to achieve this using SVG - <svg height='24' width='12' style={{ marginBottom: '-4p ...

csssvgmaterial-ui

Comparing Two Arrays in AngularJS and Disabling on Identical Cases

I currently have two tables: "Available subject" and "Added subject" which are populated by ng-repeat with two separate lists of objects. My objective is to accomplish three things: 1 - When the user clicks on the plus sign, a row with identical content s ...

javascriptangularjsarrays

Serialize a form while keeping the submitted data private

Is there a way to achieve serialization without triggering the submit function for an ajax call? I've searched extensively for a solution to this issue without any luck. The java script function is invoked when a button within the form is clicked. do ...

javascriptajaxforms

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code: .gallery-image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-S ...

htmlcss

When a function is called, retrieve a specific number of elements from an array using the slice method in

If I have an array of 15 objects, but I am only displaying 5 on the browser using this code: const displayedArray = array.slice(0,4) I also have a function that will load another 5 objects each time a user scrolls down. displayedArray.concat(array.slice ...

javascriptarraysreactjs

Guide on incorporating a bootstrap 4 navigation item into an active class through jquery

I am working on a Jekyll site and I want to dynamically add the Bootstrap 4 class active using JavaScript. I have tried using the following code: $(document).ready(function() { // get current URL path and assign 'active' class var pathna ...

javascriptjquerybootstrap-4jekyll