What is the best way to incorporate tooltips in SVG?

My teacher wants me to display a tooltip on an SVG circle with links and information when we hover over it. They suggested using jQuery UI, but I've done extensive research and nothing has been able to assist me so far.

javascripthtmlcss

Answer №1

.priority-order svg{
    float: right;
    margin-left: -25px;
}

/*custom tooltips with colored dots*/

a.tooltips {
  position: relative;
  right: 5px;
  float: right;
}

a.tooltips span {
  position: absolute;
  width: 80px;
  color: #FFFFFF;
  background: #5FB336;
  height: 29px;
  line-height: 29px;
  text-align: center;
  visibility: hidden;
  border-radius: 8px;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #5FB336;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 1;
  top: 50px;
  left: 30%;
  margin-left: -57px;
  z-index: 999;
  cursor: pointer;
}


a.tooltips1 {
  position: relative;
  right: 5px;
  float: right;
}

a.tooltips1 span {
  position: absolute;
  width: 80px;
  color: #FFFFFF;
  background: #3166ff;
  height: 29px;
  line-height: 29px;
  text-align: center;
  visibility: hidden;
  border-radius: 8px;
}
a.tooltips1 span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #3166ff;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips1 span {
  visibility: visible;
  opacity: 1;
  top: 50px;
  left: 30%;
  margin-left: -57px;
  z-index: 999;
  cursor: pointer;
}


a.tooltips2 {
  position: relative;
  right: 5px;
  float: right;
}

a.tooltips2 span {
  position: absolute;
  width: 80px;
  color: #FFFFFF;
  background: #f0584f;
  height: 29px;
  line-height: 29px;
  text-align: center;
  visibility: hidden;
  border-radius: 8px;
}
a.tooltips2 span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #f0584f;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips2 span {
  visibility: visible;
  opacity: 1;
  top: 50px;
  left: 30%;
  margin-left: -57px;
  z-index: 999;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
                <div class="priority-order">

                      <div class="">
<a class="right tooltips" href="#"><svg height="40" width="100" class="">
              <circle cx="30" cy="30" r="10" stroke-width="3" fill="#5fb336" />
                <span>Clear</span>
    </svg></a>
                    </div>  

                     <div class="">
<a class="right tooltips1" href="#"><svg height="40" width="100" class="">
              <circle cx="30" cy="30" r="10" stroke-width="3" fill="#3166ff" />
                <span>Issue</span>
    </svg></a>   
                    </div>


                <div class="">
<a class="right tooltips2" href="#"><svg height="40" width="100" class="">
              <circle cx="30" cy="30" r="10" stroke-width="3" fill="#f0584f" />
                <span>Alert</span>
    </svg></a>   
                    </div>

            </div>
            </div>

Developed unique CSS custom tooltips with colored dots after conducting a day-long research on the project.

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

How can I utilize a service for monitoring user data and ensuring that $watch() functions properly?

I'm a beginner when it comes to AngularJS and currently working on building a website that has a navigation bar dependent on the user's login status. My approach involves using a state model design with the Nav controller as the parent state for ...

javascriptangularjs

How can I designate a default value for a variable within a prop in a Vue.Js component?

I have a question regarding setting a default value for a prop using a getter. props: { userID: { type: String, default: '' } } The default value I want to set is obtained through: computed: { ...mapGetters('Auth&a ...

javascriptvue.js

Assistance is required for establishing a connection between php and js. The process begins with executing a sql query to extract the necessary data, which is then encoded into JSON format

I have encountered an issue with a project I am working on solo, involving a sidecart in a PHP file with external links to SQL, CSS, and JS. The problem arose when attempting to insert necessary data into JS using JSON encoding. <?php session_start(); ...

javascriptphpcssmysqljson

Turn off caching for the 'value' event in the Firebase Realtime Database using JS SDK

When setting up a listener for the realtime database : firebaseDb.ref(ref).on('value', (snapshot) => { console.log('snap', snap); const response = snapshot.val(); }); The snapshot is saved for offline use, and upon page refresh, ...

javascriptfirebasefirebase-realtime-databasevuejs3

Having difficulty converting a local variable into a global variable in JavaScript and Express

I am facing challenges trying to convert a local variable into a global variable while working with Express and Javascript. Below is my JavaScript code snippet: // Setting up Express and EJS const express = require("express"); const JSON = requi ...

javascriptexpress

Fade-In Effect for CSS Background Image

I'm currently learning CSS and I am trying to create an effect where, on hover over some text, the text disappears and an image fades in. I have been experimenting with different methods but haven't quite achieved the desired outcome. The text i ...

htmlcsshover

What is the proper way to utilize the value of a Node.js promise in a different function?

In my Node.js application, I have two functions defined. The first function is structured like this: function checkAdd ( address /* : string | void */ ) /* :Promise<Object[]> */ { var convertToLowerCase = address.toLowerCase() return Promi ...

javascriptnode.js

Combining Rxjs map and filter to extract countries and their corresponding states from a JSON dataset

I have a unique dataset in JSON format that includes information about countries and states. For example: { "countries": [ { "id": 1, "name": "United States" }, { "id": 2, "name": "India" }], "states": [ { ...

javascriptjsonangulartypescriptrxjs

Is there a way to connect two tables using CSS pseudo-selectors?

Is there a way to make two separate tables interact with each other using CSS pseudo-selectors? I have a data table and an auto-numbered table, and I want the rows to highlight in both tables when hovering over a cell in one of them. I've tried using ...

javascripthtmlcssreactjscss-selectors

What are the steps for creating a simple .htaccess file to add password protection to a website?

To enhance the security of my website, I implemented protection measures by creating a .htaccess file within the directory /var/www/html/. AuthType Basic AuthName "One does not simply" AuthUserFile /home/user/.htpasswd Require valid-user Additionally, I ...

html.htaccess

Capturing attention within react-bootstrap drop-downs and pop-ups

Currently, I'm focused on enhancing accessibility features and I have a specific goal in mind: to confine the focus within a popover/dropdown whenever it is opened. Working with react-bootstrap, my inquiry revolves around finding out if there's ...

javascriptreactjsreact-bootstrap

What could be causing the erratic jumping behavior of the "newsletter sign-up" form within my modal dialog window?

On the homepage, there is a modal window that appears upon every pageload (it will be changed later), however, there seems to be an issue with the 'email sign up' form inside the window. The form seems to momentarily display at the top of the si ...

javascriptjqueryhtmlcssmodal-dialog

A guide on using Javascript to write information to a JSON file

Let's consider an example where we have a .JSON file with the following content: [{"honda": "accord", "color": "red"},{"ford": "focus", "color": "black"}] We are looking to add another object {"nissan": "sentra", "color": "green"} into this existing ...

javascriptjsonajaxobject

Locating numerous occurrences of a specific string within an array and rearranging them

I am facing an issue with organizing data stored in the 'names' variable within the code snippet. The task at hand involves converting a string into an array, rearranging the elements within the array to ensure the text is in the correct order. W ...

javascriptarrayssorting

Unable to pass several parameters to a Component

I'm attempting to send three URL parameters to a React Component. This is my approach: App.js: <Route path="/details/:id(/:query)(/:type)" handler={DishDetails}/> DishDetails.js: class DishDetails extends Component { constructor(props) { ...

javascriptreactjs

How to manage a particular process ID in Node.js?

I am currently working on a node application that allows clients to control a program running on the server. The program needs to run in its own terminal window at all times. Here is the ideal scenario: When a client clicks a button, a command is executed ...

javascriptnode.jsprocesschild-processcommand-line-interface

disabling a submit button

I am new to coding and need help disabling a button on document load. Can someone assist me with this? Here is my current code snippet: $(document).ready(function() { setTimeout("check_user()", 250); }); Your guidance is greatly appreciated! ...

javascriptjquery

Change the color of the plotly button when it is clicked

I recently implemented a custom button on my plotly modeBar and I would like it to retain a distinct color when clicked. This would help visually indicate its "active" state, allowing users to easily discern whether it is enabled or disabled based on its ...

javascriptreactjs

Tips for displaying the message "{"POWER":"ON"}" within the else if statement (this.responseText == ({"POWER":"ON"})) {

Hey everyone, I'm trying to adjust the color of a button on my webpage based on the response I receive from this.responseText. I understand the JSON response, but for some reason, I can't seem to incorporate it into my code. If anyone could lend ...

javascripthtmljson

Handling Errors in Node.js with Express

To access the complete repository for this project, visit: https://github.com/austindickey/FriendFinder After downloading the directory, follow the instructions in the ReadMe to set it up on your computer. Encountering an issue where my survey.html page ...

javascriptjqueryhtmlnode.jsexpress