Utilizing SVG elements for interactive tooltips

Can the < use > element show the rect tooltip on mouseover in modern browsers?

Refer to 15.2.1 The hint element.

<svg id="schematic" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="pnp-transistor">
        <image xlink:href="transistor.png" height="32px" width="32px" />

        <rect y="0" x="0" height="6px" width="32px">
            <title>collector</title>
            <hint>collector</hint>
        </rect>

        <rect y="27" x="0" height="6px" width="32px">
            <title>emitter</title>
            <hint>emitter</hint>
        </rect>

        <rect y="0" x="0" height="32px" width="6px">
            <title>base</title>
            <hint>base</hint>
        </rect>
    </symbol>

    <use xlink:href="#pnp-transistor"></use>
</svg>
javascriptcsssvgtooltip

Answer №1

It seems like the only way to achieve this is by using JavaScript, specifically getBoundingClientRect() to find the position of the SVG in the DOM. Some useful information can be found here: How to add a tooltip to an svg graphic. However, browser support and styling options may be limited with this approach.

One workaround could be to wrap the symbol in another element and use CSS when hovering on a pseudo-class. While not as elegant as directly inheriting content into the symbol, using attr(data-tooltip) is a decent alternative.

For instance:

<div class="wrapper" data-tooltip="SVG Tooltip (almost)">
  <svg class="icon"><use xlink:href="#some-id"></use></svg>  
</div>

... 

.wrapper:after {
  position: absolute;
  left: 50%;
  transition: 0.5s;
  content: attr(data-tooltip);
  white-space: nowrap;
  opacity: 0;
  font-size: 1.5rem;
  transform: translate(-50%, 0);
}

.wrapper:hover:after {
  position: absolute;
  opacity: 1;
  transform: translate(-50%, 0.5em);
}

https://i.sstatic.net/wDSUY.gif

Codepen example: SVG With Pure CSS Tooltip

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

Issue with Material UI tabs: TypeError - Unable to access property 'charAt' as it is undefined

Currently, I am attempting to implement Material UI tabs in my project. Here is the component in question: const ItemssOverview = ({ details }) => { if (details && details.items) { return ( <div> &l ...

javascriptreactjsecmascript-6tabsmaterial-ui

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

htmlcsshovercss-transitions

Text that fades in and out based on scrolling past a specific point

There's a text containing <p> and <h1>. The text finishes with one <h1>. I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of th ...

javascriptjquerycss

Create a JavaScript variable that is initialized with a value from an AngularJS scope

What is the best way to assign a value from an AngularJS scope variable to a JavaScript variable? For example: xyz.controller({ $scope.country = "Canada"; }); Here's how you can do it in JavaScript: <script> var country = {{scope.countr ...

javascriptjqueryangularjs

How to achieve the functionality of multiple inheritance using Object.create()

Seeking insights on implementing multiple inheritance in JavaScript. Various methods exist, each with pros and cons. However, there lacks a comprehensive analysis of Object.create() presented in an understandable manner. After conducting experiments, I hav ...

javascriptmultiple-inheritanceprototypal-inheritance

Setting up the current user's location when loading a map with Angular-google-maps

I am currently utilizing the library in conjunction with the IONIC framework. To manually set the center of the map, I have implemented the following code snippet: .controller('mainCtrl', function($scope) { $scope.map = { cen ...

javascriptangularjsgoogle-mapsionic-frameworkangular-google-maps

Tips for displaying the data on top of individual column bars: Hightcharts, Vue-chartkick, and Cube Js

Looking for assistance with adding value labels to the top of each column bar in a Vue chart using chartkick and highcharts. https://i.sstatic.net/c4Bwc.jpg Check out the image above to see my current output. <template> <column-chart lable= ...

javascriptvue.jshighchartsvue-chartjscube.js

Managing user logins across different sessions using passport.js, mysql database, and express-session

Currently, my app utilizes Passport.js for user authentication with Facebook, which is functioning properly. The issue arises when my node.js server is restarted and the users are automatically logged out. It appears that using express-sessions would be a ...

javascriptmysqlnode.jsexpresspassport.js

Encountering: Unable to break down the property 'DynamicServerError' of 'serverHooks' as it does not have a defined value

An error has arisen in a Nextjs app with TypeScript, specifically in the line of my react component which can be found here. This is my inaugural package creation and after several trials, I managed to test it successfully in a similar vite and TypeScript ...

javascriptreactjstypescriptnext.jspackage

What is the best way to assign the value of a specific key in one array as the key in a different array?

I am attempting to retrieve the value feature_1 associated with the key name from the array data. I then aim to set feature_1 as the key of another array asset, with an array as its corresponding value. For example: //input: data: { name: "feature_1" ...

javascriptarraysjson

What is the process for retrieving an excel file from the backend to the frontend?

I am currently facing an issue where I want to initiate a browser download of an excel file that is generated in my backend. However, I am struggling to figure out how to pass this type of response. app.get('/all', function (req, res) { db.q ...

javascriptnode.jsreactjsxlsxjs-xlsx

Animation showing on the progress bar is not correctly halted

I am encountering a problem with handling an animation of a progress bar in my code. The issue arises when I pause the animation, as it seems to slightly backtrack instead of pausing at the correct position upon clicking a button. Can someone help identify ...

javascripthtmlcssreactjscss-animations

Discover the best places to master AJAX

Although I have come across some related questions here, none of them exactly match mine. I am aware of excellent resources like code-school and code-academy where you can improve your PHP and JS skills by coding directly on the website. However, I am wo ...

javascriptphpjqueryajax

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

My AngularJS controller looks like this: ArticleController.prototype = Object.create(BaseController.prototype); /* @ngInject */ function ArticleController (CommunicationService){ //Some code unrelated to the issue } I minified it using gulp: retur ...

javascriptangularjstypescriptprototypeminify

Fixing malfunctioning bootstrap dropdown menus in a few simple steps

For a while, I have been using the bootstrap dropdown code as a template and it was working perfectly fine. However, after ensuring everything is up to date, all my dropdowns have suddenly stopped working. Even when I tried pasting the bootstrap code dire ...

htmlcssbootstrap-4

What is the best way to organize data subsets in Firebase?

I am currently working on saving data from multiple sections within my webapp. One section involves storing employee information, while the other deals with employer group information. However, when I save this data in Firebase, it all gets organized by ID ...

javascriptangularjsfirebaseangularfire

Sharing methods between controllers in AngularJS

After coming across this insightful article on Angular validation, I decided to implement it in my project. The validation is functioning perfectly, but I am struggling to access methods in other controllers upon successful form validation. Despite trying ...

javascriptangularjs

Is it possible for JavaScript/React to observe the movement of elements on the webpage?

I'm searching for a solution to detect if an element moves on the screen. Currently, I have an absolute positioned div (acting as a download overlay) that appears when a document is clicked on my website. However, I want it to disappear whenever the d ...

javascriptreactjsdomeventslistener

Webpack 5 is unable to load animated gif files

Hello, I am currently diving into webpack and following the official documentation at https://webpack.js.org/guides/asset-management/#setup. My goal is to incorporate an animated gif using webpack 5. Although the placeholder for the gif is loading, I enco ...

javascripthtmldomgifwebpack-5

Mastering Typing for Enhanced Order Components using Recompose and TypeScript

I have been working on integrating recompose into my react codebase. As part of this process, I have been experimenting with getting some basic functionality to work. While I have made progress, I am uncertain if I am following the correct approach for usi ...

javascriptreactjstypescriptrecompose