React-map-gl Popups on hover also pops up if location on ...

I'm not sure why that's happening, but the Popup component seems to have an action associated with the marker being outside of the view:. Resultsfromthe2022DeveloperSurveyarehere. Home Public Questions Tags Users Companies Collectives ExploreCollectives Teams StackOverflowforTeams –Startcollaboratingandsharingorganizationalknowledge. CreateafreeTeam WhyTeams? Teams CreatefreeTeam Collectives™onStackOverflow Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost. Learnmore Teams Q&Aforwork Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch. Learnmore React-map-glPopupsonhoveralsopopsupiflocationonedgeofviewport AskQuestion Asked 2years,4monthsago Modified 2years,4monthsago Viewed 3ktimes 0 IamusingUber'sreac-map-glandusethepopupfunctionality.Acodesnippedfromthewebsitelooksasfollowed: import{Component}from'react'; importReactMapGL,{Popup}from'react-map-gl'; classMapextendsComponent{ state={ showPopup:true }; render(){ const{showPopup}=this.state; return( {showPopup&&this.setState({showPopup:false})} anchor="top">

} ); } } ImodifiedthecodebymakingalistofMarkersandPopupsandreturnthem.ThePopupsexclusivelyshowup,ifIhoverovertheMarkersareabut,andthat'stheissue,alsoifItakethemapanddragitsothattheMarkersareontheedgeofftheviewport. MyCSSlooksasfollowed: .mapboxgl-popup.mapboxgl-popup-anchor-top{ opacity:0; } .mapboxgl-popup.mapboxgl-popup-anchor-top:hover{ opacity:100%; width:150px; height:150px; opacity:1; } javascriptreactjsecmascript-6react-map-gl Share Follow askedFeb2,2020at23:48 christhelizchristheliz 9511silverbadge1414bronzebadges Addacomment  |  1Answer 1 Sortedby: Resettodefault Highestscore(default) Trending(recentvotescountmore) Datemodified(newestfirst) Datecreated(oldestfirst) 2 I'mnotsurewhythat'shappening,butthePopupcomponentseemstohaveanactionassociatedwiththemarkerbeingoutsideoftheview: https://github.com/uber/react-map-gl/blob/master/docs/components/popup.md#dynamicposition-boolean---default-true Considersettingittofalsesothattheiractionisn'ttriggered. this.setState({showPopup:false})} anchor="top" dynamicPosition={false} > Also,you'renotremovingthepopupsafterthehover,they'rejustopacity:0.ProbablytheactionthatdynamicPositionistriggeringisoverridingyouropacity.InsteadofusingCSSforshowingandhidingpopupsyoushoulduseJavaScript/React. Share Follow editedFeb3,2020at0:20 answeredFeb3,2020at0:09 SydneyYSydneyY 2,63922goldbadges88silverbadges1515bronzebadges 1 Adding'dynamicPosition={false}'workedforme.Thanksfortheinput!:) – christheliz Feb3,2020at14:11 Addacomment  |  YourAnswer ThanksforcontributingananswertoStackOverflow!Pleasebesuretoanswerthequestion.Providedetailsandshareyourresearch!Butavoid…Askingforhelp,clarification,orrespondingtootheranswers.Makingstatementsbasedonopinion;backthemupwithreferencesorpersonalexperience.Tolearnmore,seeourtipsonwritinggreatanswers. Draftsaved Draftdiscarded Signuporlogin SignupusingGoogle SignupusingFacebook SignupusingEmailandPassword Submit Postasaguest Name Email Required,butnevershown PostYourAnswer Discard Byclicking“PostYourAnswer”,youagreetoourtermsofservice,privacypolicyandcookiepolicy Nottheansweryou'relookingfor?Browseotherquestionstaggedjavascriptreactjsecmascript-6react-map-gloraskyourownquestion. TheOverflowBlog ExpertsfromStripeandWaymoexplainhowtocraftgreatdocumentation(Ep.455) Askedandanswered:theresultsforthe2022Developersurveyarehere! FeaturedonMeta AnnouncingthearrivalofValuedAssociate#1214:Dalmarus Testingnewtrafficmanagementtool AskWizardTestResultsandNextSteps Trending:Anewanswersortingoption Related 1 LookingforapproachtouseGraphQLdatatodisplaymarkersinMapBox 1 UsingLinkinMapboxGLJSpopupthrowsError:Invariantfailed:Youshouldnotuseoutsidea 4 HowcanIdraganddropobjectsintoaMapboxmapfromoutsidethemap? 2 Howtouseboundswithdynamicmarkersinreact-leaflet 0 UseaReactComponentasacustomOverlayViewinGoogleMaps HotNetworkQuestions Isthereanotionof"because"inmathematics? HowdidTgetintotheagency? ArduinoUnoprescaler,notmeasuringwhatIexpected WhatdoesaProfitFactorof70translatetoinaRogueTraderGame? NaturalMedicinewithBattleMedicine Whatisthelong-termprofessionalstatusofaspousalhire? WhyismydatanotnormallydistributedwhileIhaveanalmostperfectQQplotandhistogram? Isacrylic/Perspexasuitablematerialforareplacementfridgeshelf? Pullupanddownresistorsatthesametime WhichUSGovernmentAgencywouldhandlethecoverupofanewmineralfoundonadifferentplanet? Thelongestpathofedgesona3x3grid Wouldasolarsystemwithfourearthsdirectlyoppositetoeachotherhavedifferentflora? Calculus:Differencebetweenfunctionsand"equations"fromatheoreticalperspective Ship'scaptainwakescolonist,turnsouttobeaconvictworkinghissentenceasabraininajar WhywouldanyonebuyaPonyoveraMule? Whatdoes"ifinlocation"contextmeaninNginx? PartofapolygonthatisclosertopointAthanpointB WhathappenedtothelastworkGaunceLewiswasdoingwhenhedied? Kakeyacrossed-needlesproblem HowdoesanObjectateventhorizonstoptotheobserver? backwardS_hybriD-snakE_kebaB-cameL_case CanIasktobeconsideredforanotheropeninginsamegroup? Howfarfrombinary? WhydoMormonsbelievethattheUSConstitutionisdivinelyinspiredandwhatdoesthatmean? morehotquestions Questionfeed SubscribetoRSS Questionfeed TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader. lang-js Yourprivacy Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy. Acceptallcookies Customizesettings