score:2
it might be more straightforward to append the tooltips using divs rather than svg rects - for instance, if you added:
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
into your code, then you could make it appear and disappear plus add multi-line text using:
.on("mouseover", function(d){
var xpos = d3.mouse(this)[0];
var ypos = d3.mouse(this)[1];
tooltip.style("left", xpos + "px")
.style("top", ypos + "px")
.html("<p class='tooltip'>" + d.category + "<br><br>line 2<br><br>etc</p>")
.transition().delay(200).style("opacity", 0.9);
})
.on("mouseout", function(){
tooltip.transition().delay(0).style("opacity", 0);
})
you can add the same styling you had before using css properties, as below:
div.tooltip {
width: 200px;
height: 125px;
background-color: white;
border: 1px solid #969696;
position: absolute;
}
p.tooltip {
font-size: 18;
font-weight: 1em;
padding-left: 10px;
}
i've mocked this up in a jsfiddle here - it might have some of your code missing, apologies if so - but it should give a good idea how to merge it in if you want to use the code. let me know if you have any questions! you should be able to get some more information from here if you need it too.
Source: stackoverflow.com
Related Query
- How to Add Multiline Text Tooltips in Bar Chart D3 JS
- How to add text legends in bars of a bar chart in D3?
- How do i add a fixed text beside bar chart using D3
- How to add x axis text in Bar Chart column
- d3.js How to add lines to a bar chart
- How to add a line on x-axis on a horizontal bar chart in d3
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
- D3 bar chart needs to add arrow and text in particular bar
- How to add tooltips in a D3 donut chart
- How to correctly centre text element on all bars of a nvd3 bar chart
- D3 : How to add labels top of in each bar in grouped bar chart
- How to add live data to stacked bar chart
- how to add tooltip bar chart d3.js
- How to add a tooltip that shows a bar chart onto a d3.js map
- d3.js - add text above bar chart not show
- How can i set the tick text of x-axis between bar in a bar chart in c3.js or d3.js?
- how to update text added in dimple.js stacked bar chart on data updation
- How to center align text labels on bar chart using d3js
- How to add multiple tool tips to a bar chart
- What am i doing wrong? Add text to bar chart with d3js
- d3.js how do I add text to Marimekko chart
- How to insert new data into a bar chart from input text field?
- D3 How to add rounded top border to a stacked bar chart
- How to update a bar chart with accompanying text in d3?
- How to add a line at top of stacked bar chart with d3.js?
- Add text on top of bar in d3js chart -- no <text> elements added
- D3.js - How to add the general update pattern to a stacked bar chart
- How to place text inside each bar of the chart using d3
- How to add marking in bar chart using d3
- How to add a separator in D3 bar chart D3V3
More Query from same tag
- why doesn't d3-geo-zoom pan correctly for more then 1 canvas elements on the page?
- Most performant way to add to DOM in ngFor
- Using nest and rollup to create a line chart with a mean in d3 v4
- Unable to update SVG element using d3
- automatically generating links in d3 force layout
- d3 layout is undefined
- D3 Zoom behavior
- D3 version 5, how to chain promise to chart build
- Cartogram using angularjs and d3 TypeError: undefined is not a function
- How to create a javascript function using Scala.js?
- Google Maps with D3.geo.path
- array of rectangles without d3.js
- reactjs and pushing onclick states back up to the parent shell
- Zoom Pan images with d3.js
- want to generate multiple charts in d3 in same page for different data set
- meteor d3.js fails to display contextmenu
- Making Cubism.js work with Rails app
- d3-formatted Numbers Not Displaying Thousands-Separator
- d3 v4 tree zoom out when a node expanded
- Updating d3 elements in React?
- Updating DOM Node with text overwrites old text
- D3 js orthographic markers rotation
- d3.js group bar chart not working
- How to close and just later add HTML element in D3.JS?
- Restrict the movement of the element, when we drag it
- 'Invalid value for <path>' error while making pie chart under Plottable/D3.js
- d3 force layout - how to create a more sensible node structure
- Translate it to another position using d3
- d3 arc creation not working with data binding
- D3 fill pie chart segment on mouseover