Make Folium tooltips wrap text using Python

Question

I'm using Folium to create an interactive Leaflet map. My map has tooltips that run off the screen. How can I set the text boxes to wrap text? One suggestion was to create an independent CSS file and modify the HTML output that way, but I'd rather do it in Python instead.

My code and image is below:

import folium
from folium.plugins import MarkerCluster

m = folium.Map(location=df[["lat", "lon"]].mean().to_list(), zoom_start=4)
title_html = '''
              <h3 align="center" style="font-size:16px"><b>{}</b></h3>
             '''.format(f'Russian Oligarch Real Estate Transactions/investments')

marker_cluster = MarkerCluster().add_to(m)

for i,r in df.iterrows():
    location = (r["lat"], r["lon"])
    info = (r['Name'],r['Full_Address'],r['Oligarch_Description'])
    info = list(info)
    new_line = '<br>'
    bold_start = '<strong>'
    bold_end = '</strong>'
    text = f'Name: {bold_start}{info[0]}{bold_end}{new_line} \
    Address: {bold_start}{info[1]}{bold_end}{new_line}Brief Bio: \
    {bold_start}{info[2]}{bold_end}'
    folium.Marker(location=location,
                      tooltip=text)\
    .add_to(marker_cluster)

m.get_root().html.add_child(folium.Element(title_html))

m

Answer 1

I don't know if this resolves problem but you can use string-functions in Python to wrap it.

You can replace every dot with <br> - so every sentece will be in new line

text = text.replace(". ", ". <br>")

or you can split into lines with i.e. 50 chars and join back using <br>

import textwrap

desc = r['Oligarch_Description']

splited = textwrap.wrap(desc, 50)

desc = '<br>'.join(splitted)

print(desc)

Screenshot for device 480x320 (using Firefox Ctrl+Shift+M)

---

Full working code with example data in code.

It saves in file and opens in browser (I run it as normal script, not in Jupyter).

import folium
from folium.plugins import MarkerCluster

import pandas as pd
import webbrowser
import textwrap

df = pd.DataFrame({
  'lat':[55],
  'lon': [38],
  'Name': ['Ivan'],
  'Full_Address': ['Moscow'],
  'Oligarch_Description': ["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."],
})    

m = folium.Map(location=df[["lat", "lon"]].mean().to_list(), zoom_start=4)

title = 'Russian Oligarch Real Estate Transactions/investments'
title_html = '<h3 align="center" style="font-size:16px"><b>{}</b></h3>'.format(title)

marker_cluster = MarkerCluster().add_to(m)

for i, r in df.iterrows():
    location = (r["lat"], r["lon"])
    
    desc = r['Oligarch_Description']
    #desc = desc.replace('. ', '. <br>')
    desc = '<br>'.join(textwrap.wrap(desc, 50))
    print(desc)
    
    text = f"Name: <strong>{r['Name']}</strong></br> \
Address: <strong>{r['Full_Address']}</strong></br> \
Brief Bio:<br> \
<strong>{desc}</strong>"
    
    folium.Marker(location=location, tooltip=text).add_to(marker_cluster)

m.get_root().html.add_child(folium.Element(title_html))

m.save('folim.html')
webbrowser.open('folim.html')