Comments (9)
Can you provide a reproducible example? Either a repo or a CodeSandbox or similar. We might be able to help out by having one.
Tried copying the code you posted, but couldn't figure out some of the stuff that's missing.
from react-tooltip.
@dhruvsakariya your initial assessment about using pointermove
instead was accurate. Your example using the beta version [email protected]
:
An official release should be up soon. Feel free to use [email protected]
until then.
from react-tooltip.
@dhruvsakariya your initial assessment about using
pointermove
instead was accurate. Your example using the beta version[email protected]
:An official release should be up soon. Feel free to use
[email protected]
until then.
Thanks @gabrieljablonski for helping to resolve this issue
from react-tooltip.
Fix available on official version [email protected]
from react-tooltip.
I'm not sure switching to pointermove
would improve this, but even if it did, it's not the best approach for this situation.
I don't recall react-simple-maps
DOM structure exactly, but try something similar to this:
<MyComponent>
<MapContainer style={{ position: 'relative' }}>
<MapElement data-tooltip-id="my-tooltip" data-tooltip-content="tooltip content" />
<Tooltip id="my-tooltip" float />
</MapContainer>
</MyComponent>
I believe the "draggable" behavior should work the same as when scrolling an element. By default, the tooltip uses position: absolute
to position itself, so when we set the <MapContainer />
element position attribute, it should work as you expect.
Just as a side note, you don't have to set it through the inline style
prop, you can also use regular CSS or a styled component.
from react-tooltip.
@gabrieljablonski Thanks you for helping with this issue
- I am also not sure switching to
pointermove
will work or not ππΌββοΈ.
This is elements structure for react-simple-maps
in virtual DOM.
<div className="relative">
{/* Map πΊοΈ */}
<ComposableMap projection="geoMercator" className="w-[800px] h-[600px]">
<ZoomableGroup
zoom={position.zoom}
center={position.coordinates}
onMoveEnd={handleMoveEnd}
>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map((geo) => {
return (
<Geography
key={geo.rsmKey}
geography={geo}
onMouseEnter={() => {
document.body.classList.add("target");
}}
onMouseLeave={() => {
document.body.classList.remove("target");
}}
fill={geo.properties.color}
stroke="#bec1c4"
strokeWidth="0.5"
className="focus:outline-none"
data-tooltip-id={id}
style={
{
// hover: {
// fill: "#046A38",
// outline: "none",
// },
// pressed: {
// fill: "#FF671F",
// outline: "none",
// },
}
}
/>
);
})
}
</Geographies>
</ZoomableGroup>
</ComposableMap>
{/* Tooltipπ‘ */}
<Tooltip
ref={tooltip}
id={id}
float
className={`!p-0 !rounded-lg !bg-white !text-inherit ${shadow_custom_world_map} select-none z-10`}
arrowColor={"white"}
opacity={1}
>
<div className="flex gap-x-5 px-4 pt-1 pb-2">
<div className="flex justify-center items-center">
<span
className={`fi fi-br fis mr-2 !leading-[1.15em] rounded-full h-5 !w-5`}
/>
<p className="font-primary-Regular">Brazil</p>
</div>
<div>
<small className=" font-primary-Regular ">Online Revenue</small>
<p className="text-sm font-primary-Regular">$13,450,000</p>
</div>
</div>
</Tooltip>
{/* Zoom in-out ππ */}
<div className="absolute right-0 bottom-0">
<div
className={`bg-white rounded-lg p-2 mx-3 my-1 ${shadow_custom_world_map}`}
>
<button
className="block p-1 pb-2"
title="zoom in"
type="button"
onClick={handleZoomIn}
>
<FaPlus />
</button>
<button
className="block p-1 pt-2"
title="zoom out"
type="button"
onClick={handleZoomOut}
>
<FaMinus />
</button>
</div>
<button
title="center"
type="button"
onClick={handleCenter}
className={`p-3 mx-3 mt-1 mb-2 bg-white rounded-lg float-right ${shadow_custom_world_map}`}
>
<BiTargetLock />
</button>
</div>
{/* Legends π */}
<div
className={`absolute right-0 top-0 bg-white rounded-2xl p-2 m-3 ${shadow_custom_world_map}`}
>
{legends.map(({ color, name }) => {
return (
<div
key={color}
className="font-primary-Regular flex items-center my-1.5 gap-x-3"
>
<div
className="w-4 h-4 rounded-sm"
style={{ background: color }}
/>
<span className="text-sm">{name}</span>
</div>
);
})}
</div>
</div>
Actually I did the same thing in my Implementation by Adding Tooltip after Map Element but it is not moving while dragging MapElement
from react-tooltip.
From what I can tell, you'll have to place the tooltip component inside ZoomableGroup, which is also the element you will have to set the position attribute to relative.
Try that and let me know the result.
from react-tooltip.
From what I can tell, you'll have to place the tooltip component inside ZoomableGroup, which is also the element you will have to set the position attribute to relative.
Try that and let me know the result.
Tried by Putting Tooltip
inside ZoomableGroup
but still when i start dragging map tooltip doesn't move ( as before ).
What could be the other possible Solution ? π€π
from react-tooltip.
Can you provide a reproducible example? Either a repo or a CodeSandbox or similar. We might be able to help out by having one.
Tried copying the code you posted, but couldn't figure out some of the stuff that's missing.
Here is the working environment on code sandbox
from react-tooltip.
Related Issues (20)
- [BUG] Strings are not escaped properly HOT 2
- [BUG] when i zoom out or in the big screen resolutions the tooltip is not in right place HOT 3
- Can't import the named export 'arrow' from non EcmaScript module (only default export is available) HOT 7
- [BUG] openEvents does not work with "click" HOT 4
- Is is possible to export default middlewares? HOT 1
- [BUG] Testing react-tooltip with modal result to a failed HOT 1
- [BUG] Tooltip shows briefly when using delayShow and moving to directly adjacent element HOT 3
- [FEAT REQ] Render tooltips inside portal HOT 4
- [BUG] CSP breaks, styles are injected even after disableStyleInjection is used HOT 2
- The component doesn't show the tooltip when there is a single quote " ' " in the data-tooltip-id and the id passed on the Tooltip component. HOT 2
- Safari mobile browser gets the error e.getAttributeNames HOT 2
- [BUG] : When ' (single quote) is used any where in the text, the tooltip doesn't open HOT 4
- I have set opacity to 1 but I can still see though HOT 3
- [BUG] HOT 2
- [BUG] anchor element does not close the tooltip on click HOT 3
- [BUG] #1042 Regression from 5.26.0 β 5.26.1 HOT 1
- Tooltip is not working HOT 2
- [BUG] Element with id 'react-tooltip-base-styles' already exists
- if message is long, how to make message's tooltip showing next to chat box HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-tooltip.