Фон HoverTool

Question

Пример, который я использую, приведен на странице документации Bokeh, Configuring Plot Tools.

from bokeh.plotting import figure, output_file, show, ColumnDataSource 
from bokeh.models import HoverTool 

output_file("toolbar.html") 

source = ColumnDataSource(
     data=dict(
      x=[1, 2, 3, 4, 5], 
      y=[2, 5, 8, 2, 7], 
      desc=['A', 'b', 'C', 'd', 'E'], 
      imgs = [ 
       'http://bokeh.pydata.org/static/snake.jpg', 
       'http://bokeh.pydata.org/static/snake2.png', 
       'http://bokeh.pydata.org/static/snake3D.png', 
       'http://bokeh.pydata.org/static/snake4_TheRevenge.png', 
       'http://bokeh.pydata.org/static/snakebite.jpg' 
      ], 
      fonts=['<i>italics</i>', 
        '<pre>pre</pre>', 
        '<b>bold</b>', 
        '<small>small</small>', 
        '<del>del</del>' 
        ] 
     ) 
    ) 

hover = HoverTool(
     tooltips=""" 
     <div> 
      <div> 
       <img 
        src="@imgs" height="42" alt="@imgs" width="42" 
        style="float: left; margin: 0px 15px 15px 0px;" 
        border="2" 
       ></img> 
      </div> 
      <div> 
       <span style="font-size: 17px; font-weight: bold;">@desc</span> 
       <span style="font-size: 15px; color: #966;">[$index]</span> 
      </div> 
      <div> 
       <span>@fonts{safe}</span> 
      </div> 
      <div> 
       <span style="font-size: 15px;">Location</span> 
       <span style="font-size: 10px; color: #696;">($x, $y)</span> 
      </div> 
     </div> 
     """ 
    ) 

p = figure(plot_width=400, plot_height=400, tools=[hover], 
      title="Mouse over the dots") 

p.circle('x', 'y', size=20, source=source) 

show(p) 

Учитывая этот код, как я могу сделать фон из HoverTool конкретного цвета, прямо сейчас я могу только настроить цвета изображений и текста в отдельности.

Answer 1

Есть два способа сделать это простым способом, когда вы можете просто нарисовать div, который вы сделаете внутри всплывающей подсказки;

from bokeh.plotting import figure, output_file, show, ColumnDataSource 
from bokeh.models import HoverTool 

output_file("toolbar.html") 
source = ColumnDataSource(
     data=dict(
      x=[1, 2, 3, 4, 5], 
      y=[2, 5, 8, 2, 7], 
      desc=['A', 'b', 'C', 'd', 'E'], 
      imgs = [ 
       'http://bokeh.pydata.org/static/snake.jpg', 
       'http://bokeh.pydata.org/static/snake2.png', 
       'http://bokeh.pydata.org/static/snake3D.png', 
       'http://bokeh.pydata.org/static/snake4_TheRevenge.png', 
       'http://bokeh.pydata.org/static/snakebite.jpg' 
      ], 
      fonts=['<i>italics</i>', 
        '<pre>pre</pre>', 
        '<b>bold</b>', 
        '<small>small</small>', 
        '<del>del</del>' 
        ] 
     ) 
    ) 
# ADDING STYLES TO THE FIRST DIV TAG 
hover = HoverTool(
     tooltips=""" 
     <div style="background:red;"> 
      <div> 
       <img 
        src="@imgs" height="42" alt="@imgs" width="42" 
        style="float: left; margin: 0px 15px 15px 0px;" 
        border="2" 
       ></img> 
      </div> 
      <div> 
       <span style="font-size: 17px; font-weight: bold;">@desc</span> 
       <span style="font-size: 15px; color: #966;">[$index]</span> 
      </div> 
      <div> 
       <span>@fonts{safe}</span> 
      </div> 
      <div> 
       <span style="font-size: 15px;">Location</span> 
       <span style="font-size: 10px; color: #696;">($x, $y)</span> 
      </div> 
     </div> 
     """ 
    ) 

p = figure(plot_width=400, plot_height=400, tools=[hover], 
      title="Mouse over the dots") 

p.circle('x', 'y', size=20, source=source) 

show(p) 

Недостатком является то, что всплывающая подсказка имеет раздражающую белую границу вокруг него. Конечно, вы могли бы добавить больше стилей к первому тегу div, например, дополнению и круглым углам с тенью для теней, чтобы он выглядел немного лучше, но если вы сделаете это простым способом, вы всегда будете иметь белые границы (если есть что-то, чтобы переопределить встроенный CSS, о котором я не знаю). В любом случае здесь является более трудный путь сделать это:

1. Clone или скачать bokeh repo из GitHub.
2. Перейти к архиву bokehjs\src\less\tooltips.less
3. Изменить менее файл, изменив @tooltipColor ect.
4. Построить bokehjs от scratch as described in the bokeh developer's guide.
5. Установите боке из родительского каталога python setup.py install. Это также описано в руководстве разработчика.

UPDATE:

ЛЕГКИЙ ПУТЬ БЕЗ СТРАШНОЙ белой каймы: После этого быстрого поиска я нашел способ, чтобы переопределить .bk-tooltip стиль от самой подсказки.

from bokeh.plotting import figure, output_file, show, ColumnDataSource 
from bokeh.models import HoverTool 

output_file("toolbar.html") 
source = ColumnDataSource(
     data=dict(
      x=[1, 2, 3, 4, 5], 
      y=[2, 5, 8, 2, 7], 
      desc=['A', 'b', 'C', 'd', 'E'], 
      imgs = [ 
       'http://bokeh.pydata.org/static/snake.jpg', 
       'http://bokeh.pydata.org/static/snake2.png', 
       'http://bokeh.pydata.org/static/snake3D.png', 
       'http://bokeh.pydata.org/static/snake4_TheRevenge.png', 
       'http://bokeh.pydata.org/static/snakebite.jpg' 
      ], 
      fonts=['<i>italics</i>', 
        '<pre>pre</pre>', 
        '<b>bold</b>', 
        '<small>small</small>', 
        '<del>del</del>' 
        ] 
     ) 
    ) 

hover = HoverTool(
     tooltips=""" 
     <HTML> 
     <HEAD> 
     <style> 
     .bk-tooltip { 
      background-color: red !important; 
      } 
     </style> 
     </HEAD> 
     <BODY> 
     <div> 
      <div> 
       <img 
        src="@imgs" height="42" alt="@imgs" width="42" 
        style="float: left; margin: 0px 15px 15px 0px;" 
        border="2" 
       ></img> 
      </div> 
      <div> 
       <span style="font-size: 17px; font-weight: bold;">@desc</span> 
       <span style="font-size: 15px; color: #966;">[$index]</span> 
      </div> 
      <div> 
       <span>@fonts{safe}</span> 
      </div> 
      <div> 
       <span style="font-size: 15px;">Location</span> 
       <span style="font-size: 10px; color: #696;">($x, $y)</span> 
      </div> 
     </div> 
     </BODY> 
     </HTML> 
     """ 
    ) 

p = figure(plot_width=400, plot_height=400, tools=[hover], 
      title="Mouse over the dots") 

p.circle('x', 'y', size=20, source=source) 

show(p)