将鼠标悬停在应出现文本的区域上

Question

I am currently viewing the neighborhoods. However, when I hover the mouse over it, I want a text to be displayed with the neighborhood and the average price. I have pasted my code and my card what I made. Below you can see how I would like it.

How can I display a text when I hover over it?

import folium
from folium.plugins import FastMarkerCluster
from branca.colormap import LinearColormap

map_ams_price = folium.Map(location=[52.3680, 4.9036], zoom_start=11, tiles="cartodbpositron")
map_ams_price.choropleth(
    geo_data=r'C:\neighbourhoods.geojson',
    data=df,
    columns=['neighbourhood_cleansed', 'price'],
    key_on='feature.properties.neighbourhood',
    fill_color='BuPu', 
    fill_opacity=0.7, 
    line_opacity=0.2,
    legend_name='Avg',
    reset=True,
    tooltip=folium.features.GeoJsonTooltip(fields=['neighbourhood_cleansed', 'price'],
                                                      labels=True,
                                                      sticky=False),
)

map_ams_price

Minium Example

# the price is the avg price
d = {'neighbourhood_cleansed': ['Oostelijk Havengebied - Indische Buurt', 'Centrum-Oost',
       'Centrum-West', 'Zuid', 'De Baarsjes - Oud-West', 'Bos en Lommer',
       'De Pijp - Rivierenbuurt', 'Oud-Oost', 'Noord-West', 'Westerpark',
       'Slotervaart', 'Oud-Noord', 'Watergraafsmeer',
       'IJburg - Zeeburgereiland', 'Noord-Oost', 'Buitenveldert - Zuidas',
       'Geuzenveld - Slotermeer', 'De Aker - Nieuw Sloten', 'Osdorp',
       'Bijlmer-Centrum', 'Gaasperdam - Driemond', 'Bijlmer-Oost'],
'price': [20.0,30.0,40.0,50.0,60.0,70.0,80.0,20.0,30.0,40.0,50.0,60.0,70.0,80.0,20.0,30.0,40.0,50.0,60.0,70.0,80.0,20.0]}
df = pd.DataFrame(data=d)

You can find the geojson here https://pastecode.io/s/a76fdvey

Answer 1

As I mentioned in the comments, in order to give tooltips in the choropleth map, they have to be in the geojson file, not in the dataframe value, in order to be displayed. So I used geopandas for the geojson file to be used, combined the data frames and added the price information to the geojson file. The column names in the original data frame have been modified to match the geojson file. It can also be used as a label by adding an alias name. The tooltip can be styled, so I added that as well.

import json
import requests
import geopandas as gpd

url = "http://data.insideairbnb.com/the-netherlands/north-holland/amsterdam/2021-09-07/visualisations/neighbourhoods.geojson"

gpd_geo = gpd.read_file(url)
gpd_geo = gpd_geo.merge(df, on='neighbourhood')
geo_json_data = gpd_geo.to_json()

import folium
from folium.plugins import FastMarkerCluster
from branca.colormap import LinearColormap
from folium.features import GeoJsonPopup, GeoJsonTooltip

map_ams_price = folium.Map(location=[52.3680, 4.9036], zoom_start=11, tiles="cartodbpositron")
choropleth = folium.Choropleth(
    geo_data=geo_json_data,
    data=df,
    columns=['neighbourhood', 'price'],
    key_on='feature.properties.neighbourhood',
    fill_color='BuPu', 
    fill_opacity=0.7, 
    line_opacity=0.2,
    legend_name='Avg',
    reset=True,
    highlight=True,
).add_to(map_ams_price)

choropleth.geojson.add_child(
    folium.features.GeoJsonTooltip(fields=['neighbourhood', 'price'],
                                   aliases=['neighbourhood:', 'average_price:'],
                                   labels=True,
                                   localize=True,
                                   sticky=False,
                                   style="""
                                   background-color: #F0EFEF;
                                   border: 2px solid black;
                                   border-radius: 3px;
                                   box-shadow: 3px;
                                   """,)
)

map_ams_price