Tips for creating a tooltip above an SVG circle with AngularJS

I'm currently working on a project where I am using AngularJS and SVG to plot circles on a page. My goal is to have a tooltip appear when a user hovers over one of the circles. I came across an explanation on how to achieve this on this website, but unfortunately, it's not working for me. Below is the code I'm using:

<circle ng-repeat="node in slowQueriesCtrl.nodes"
              ng-attr-cx="{{node.x}}"
              ng-attr-cy="{{node.y}}"
              ng-attr-r= "{{node.r}}"
              tooltip="Hello World"
              tooltip-append-to-body="true"
              tooltip-placement="right"
              stroke="green"
              stroke-width="3"
              fill="green">
</circle>

While I can see the circles displaying on the UI, the tooltips are not showing up. Any assistance or guidance on this issue would be highly appreciated.

javascriptangularjstwitter-bootstrapsvgangular-ui-bootstrap

Answer №1

Can you please give this a try?

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="TooltipDemoCtrl">
    <svg>
      <circle cx="60" cy="60" r="50" tooltip-append-to-body="true" tooltip-placement="right" uib-tooltip="Hello World">
      </circle>
    </svg>
  </div>
</body>

</html>

Also, include the following code:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function () {
})

;

Answer №2

  1. Starting from version 0.14.0, all parent directives are now required to have the uib- prefixes added to their names. This means that instead of using tooltip, you should use uib-tooltip.

  2. In addition, as pointed out by @ciril sebastian, it seems like you forgot to enclose your circle element within an svg element.

    <svg>
    <circle ng-repeat="node in slowQueriesCtrl.nodes"
        ng-attr-cx="{{node.x}}"
        ng-attr-cy="{{node.y}}"
        ng-attr-r= "{{node.r}}"
        uib-tooltip="Hello World"
        tooltip-append-to-body="true"
        tooltip-placement="right"
        stroke="green"
        stroke-width="3"
        fill="green">
    </circle>
</svg>

Check out this functioning plunk here

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

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascriptcsswebpacksass

Ways to activate auto completion without using a string

Can anyone assist us with the tinymce editor? We have implemented an auto completion feature using a plugin from TinyMCE's documentation, but we are having trouble changing the triggering behavior. Currently, it only suggests options when "@" is typed ...

javascripthtmltypescripttinymcetinymce-5

Angular CDKScrollable not triggering events

I'm having trouble making the angular CdkScrollable work when creating my own div: <div class="main-section" id="mainsection" #mainsection CdkScrollable> <div class="content" style="height: 300px; backgr ...

javascriptangularangular-cdk-virtual-scroll

Server Receiving Missing Post Parameters

I've developed a straightforward $resource factory. .factory('Order', order) order.$inject = ['$resource', "ApiEndpoint", "UserRecord"]; function order($resource, ApiEndpoint, UserRecord) { return $resource(ApiEndpoint.url + & ...

javascriptangularjshttp-headersurl-parametersngresource

Integrating a YouTube video in the Google Maps info window with the help of Ajax technology

Currently working on a project for Udacity, my goal is to develop a neighborhood map using Google Maps API alongside Knockout and Ajax to integrate with another 3rd party API. A unique aspect of my approach is focusing on bars in the neighborhood and utili ...

javascriptjqueryajaxgoogle-mapsyoutube

What is the mechanism behind angular2's spa routing functioning seamlessly without the need for the hash character in the url?

During my experience with the Angular2 "Tour of Heroes" tutorial, I made an interesting observation about how their single page application router functions without a trailing hash symbol (#) in the URL. This differs from the Kendo SPA router, which typica ...

javascriptangularangular-ui-routersingle-page-applicationrouter

The process of utilizing variables to form objects in ES6

My ES5 code contains a variable as shown below. var options = { clientId : clientId, keepAlive : keepAlive, clean : clean, reconnectPeriod : reconnectPeriod, will : lastWillMessage }; If I want to convert this to ES6, I can do so by writing ...

javascriptnode.jsecmascript-6

Exploration of features through leaflet interaction

Attempting to plot bus routes on a map using leaflet with geojson for coordinates. Facing issues with making the bus line bold when clicked, and reverting the style of previously clicked features back to default. Current Progress function $onEachFeature( ...

javascriptjquerycssleafletgeojson

svg xlink attribute not functioning properly when embedded as svg object within html

Within the SVG, I have multiple A elements linking to various pages. When the SVG is loaded into a browser as a standalone, the links function properly. However, when it is embedded as an object within an HTML page, the links do not work. It seems like th ...

htmlsvg

Attempting to incorporate icons into a Material UI table design

Hello, I've incorporated a Material UI table into one of my projects with a design concept similar to this - https://i.stack.imgur.com/i6Fsj.png I'm aiming to include icons within the tables. Here's the code I've worked on so far - ...

javascriptreactjsmaterial-ui

Angular2's change detection mechanism does not behave as anticipated after receiving a message from a Worker

Within my angular2 application, I encountered a rather intriguing scenario which I will simplify here. This is AppComponnet export class AppComponent { tabs: any = []; viewModes = [ { label: "List View"}, { label: "Tree View" }, ...

javascriptangularangular2-changedetection

Implementing JSON methods in C# WebService to enable communication with external servers

Is it possible to integrate an asp.net web service written in C# into an HTML5/JavaScript website? The challenge is that the web service and client are located on different domains, requiring a cross-domain request. ...

c#javascriptjsonweb-servicescross-domain

Having difficulty extracting only names from the database with mongoose

My goal is to retrieve the value of all the name keys stored in my database. Each document in the database has only one key, which is the "name" key. Below is the code snippet that I need assistance with: user.find({}, 'name', function(err, user ...

javascriptnode.jsmongodbexpressmongoose

iPhone height is not correct

One issue I faced was when trying to view a webpage in landscape mode on iPhones (specifically testing on model SE, but it appears that many people are experiencing the same problem with other iPhone models). I have created a simple example below, consist ...

javascripthtmlcssiphonemobile

Using d3 to showcase pictures sourced from a csv file

Having recently embarked on a journey to learn javascript, d3, and the polymer project, I am facing a challenge that I hope to get some guidance on. After successfully parsing a csv file containing image information and creating an array specifically for ...

javascripthtmlimaged3.js

What could be causing the delay in this number updating on my webpage automatically?

Short version - Why isn't the value of practiceCount changing when using $on? Check out the codepen here: http://codepen.io/anon/pen/qNERva As I'm new to MEAN development, this is my third day practicing and I still have a lot to learn. My goal ...

angularjsexpressmeanauto-update

Using Angular to open a modal by invoking the href function

Current Project Context I am currently following a tutorial on CRUD operations with DataTables, but I am using Asp.Net WebApi with Angular for this project. At step 9 of the tutorial, it introduces partial views for pop-up windows. However, instead of us ...

javascriptangularjsasp.net-mvcdatatables

Typescript - Conditional imports

When working with the moment-timezone module, one issue that arises is receiving a warning if it is included multiple times. In my specific case, I have a module that necessitates the use of this timezone functionality. Since I am unsure whether or not the ...

javascripttypescript

What are the steps to automatically populate the location or name in the trip advisor widget?

I have encountered an issue with my website where I have multiple hotel lists but the trip advisor widget only shows one. Is there a solution, such as a script or other method, that can use variables to automatically set the location or name in the widget? ...

javascriptjqueryangularjs

JavaScript sorting through nested functions

Having an issue with running a function inside another function for my Bingo game script. The checkBingo() function is defined outside of a .click() function, but I'm facing problems. Ajax is involved, so that might be contributing to the issue. Here& ...

javascriptjqueryajax