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.
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.
.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.
Looking for a way to close the print window of a browser using JavaScript or any other method, with JavaScript being the preferred option. Any help on closing the print window for IE, Chrome and Safari would be greatly appreciated. Please assist.. Thank ...
I have a Angular 7 app where I am implementing some reactive forms. The initialization of my reactive form looks like this: private initFormConfig() { return this.formBuilder.group({ modeTransfert: [''], modeChiffrement: [' ...
In TypeScript, I have defined the following Interface: interface Person { Id: number; FirstName: string; LastName: string; Age: number; } Within a .html partial file, there is an Angular directive ng-submit="submit()" on a form element. A ...
I have scoured all the related questions and answers on StackOverflow, but none seem to address my specific issue. Here is the HTML code I am using: <select name="search_month" onclick="javascript: $('#categories').val(null);" id="months"> ...
export default { mounted() { setTimeout(function() { this.$emit('onLoad') }, 4000); } } //views/Load.vue I want to redirect to another page after the page has been accessed for 4 seconds. <template> <d ...
I am in the final stages of completing my form, but I have encountered an issue when trying to display the current user's name in the defaultValue variable of the TextField from MUI. If the value starts as ""/null, or essentially empty, the ...
Can anyone assist me in positioning my arrow next to the header text, which I toggle on click? I attempted placing the arrow <div> into the H1 tag, but then the toggle function stops working. Any help would be greatly appreciated! Please includ ...
Is it possible to create a PDF editor similar to MS Word using vuejs? How can I implement custom logic in the PDF editor with vuejs? For example, the features should include: Conditional replacement of text Adding tags to text within the PDF Changing the ...
<table class="table_style" id="table"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> ...
I am in the process of creating a function that matches React's useState signature: declare function useState<S>( initialState: S | (() => S), ): [S, React.Dispatch<React.SetStateAction<S>>]; Below is an excerpt from the functi ...
Check out this code snippet that utilizes axios in a React project. axios.get(`https://resolab-backend.herokuapp.com/core/create_seeker`,{ params:{ complete_list : true }, headers:{ 'Authorization': `Token ${cookies.get("token")}` } ...
I'm facing a minor issue that I need help solving. I want to have two simple arrows (one pointing left and one right) vertically aligned in the center of an image. Additionally, these arrows should resize proportionally when the screen size changes. ...
Upon upgrading from typescript 4.9.3 to 5.0.2, we encountered an error when asserting types. Can someone explain why the function "wontWorking" is not functioning correctly? I expected this function to infer v as Record<string, any>, but instead it ...
I am struggling to align an inline SVG within a bounding DIV correctly, as shown in this example. <!DOCTYPE html> <html> <body> <div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;"> < ...
After receiving data from a web server, I created a JSON object using the code obj = JSON.parse(data). This object contains information about dinosaurs such as their name, group, diet, and period. This is what the JSON object looks like: [{"name":"Stauri ...
I am looking for a way to preload an entire web page using JavaScript in order to have it cached in the user's browser. While I know how to preload images with JS, my goal is to also preload the entire page itself. For example, on my website, there ...
My React Router is functioning properly in the development environment. Here's what I implemented in Webpack Dev Server: historyApiFallback: { index: 'index.html', } Now, when transitioning to production mode, I wanted to replicate the ...
My current issue involves an EventEmitter object set up to listen for events and write information to a file when the event is emitted. Using fs.createWriteStream(path, { flags: 'a'});, I have opened a FileStream. However, emitting events quickly ...
I am currently working on translating my project into a different language. To do this, I have implemented the Angular Translate library and uploaded an external JSON file containing all the translations. Here is an example of how it looks: { "hello_wor ...
Looking for some guidance: I have a task where I need to display a limited number of products from an array on the page initially. The remaining items should only be visible when the user clicks the "Show All" button. Upon clicking, all items should be rev ...