Not really very knowledegable on CSS or what Bokeh is doing exactly when utilizing a custom tooltip.
I created one and would like to get rid of the white box that’s surrounding my tooltip. Any ideas?
Hi, unfortunately this is not easily configurable at the moment. The CSS selector you want to target is .bk-toolip, as shown below:
Specifically the border is controlled by the “border” property which is that e5e5e5 light grey by default.
Thanks,
Bryan
···
On Jan 15, 2018, at 09:56, Charles [email protected] wrote:
Not really very knowledegable on CSS or what Bokeh is doing exactly when utilizing a custom tooltip.
I created one and would like to get rid of the white box that’s surrounding my tooltip. Any ideas?
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0441afaf-a97a-4d41-a943-8bb6484a0c1b%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
Any quick tip on how to go back and edit the inherited values for the tooltip like border and background-color? When I getElementsByClassName(‘bk-tooltip’)[0] it only has the attributes listed above in the style property, with display coming on and off depending on whats happening. In the browser developer tools I can obviously toggle/cahnge these properties and get the effect I want but I’m still lost on how to access and change the .bk-tooltip properties with the given document
···
On Tuesday, January 16, 2018 at 3:26:02 PM UTC-6, Bryan Van de ven wrote:
Hi, unfortunately this is not easily configurable at the moment. The CSS selector you want to target is .bk-toolip, as shown below:
Specifically the border is controlled by the “border” property which is that e5e5e5 light grey by default.
Thanks,
Bryan
On Jan 15, 2018, at 09:56, Charles [email protected] wrote:
Not really very knowledegable on CSS or what Bokeh is doing exactly when utilizing a custom tooltip.
I created one and would like to get rid of the white box that’s surrounding my tooltip. Any ideas?
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0441afaf-a97a-4d41-a943-8bb6484a0c1b%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
Hi,
Sending custom CSS rules with a Bokeh document is a current open issue that we hope to address soon. For now there is no option but to use a custom template that includes the CSS rules you want to add. Using a template looks different depending on how you are using Bokeh (a server app? embedded components in a web app? standalone HTML output? notebook?) If you can be more specific I can try to point to more specific guidance.
Thanks,
Bryan
···
On Jan 18, 2018, at 12:45, Charles <[email protected]> wrote:
Any quick tip on how to go back and edit the inherited values for the tooltip like border and background-color? When I getElementsByClassName('bk-tooltip')[0] it only has the attributes listed above in the style property, with display coming on and off depending on whats happening. In the browser developer tools I can obviously toggle/cahnge these properties and get the effect I want but I'm still lost on how to access and change the .bk-tooltip properties with the given document
On Tuesday, January 16, 2018 at 3:26:02 PM UTC-6, Bryan Van de ven wrote:
Hi, unfortunately this is not easily configurable at the moment. The CSS selector you want to target is .bk-toolip, as shown below:
Specifically the border is controlled by the "border" property which is that e5e5e5 light grey by default.
Thanks,
Bryan
On Jan 15, 2018, at 09:56, Charles <[email protected]> wrote:
Not really very knowledegable on CSS or what Bokeh is doing exactly when utilizing a custom tooltip.
I created one and would like to get rid of the white box that's surrounding my tooltip. Any ideas?
--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0441afaf-a97a-4d41-a943-8bb6484a0c1b%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8e298410-459c-4a24-b4ac-90521fc4db54%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
Using Bokeh server to run a web app. The only element that seems to exist on the document is with the bk-tooltip class is the left or right actual arrow indicator for the custom tooltip. If I obtain that element, is it possible to access/change these values with a callback or is this the wrong approach? Not savvy with CSS but it looks like I want to edit the source @ bokeh.min.css?
.bk-root .bk-tooltip {
-
font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; -
font-weight: 300; -
font-size: 12px; -
position: absolute; -
padding: 5px; -
/* border: 1px solid #e5e5e5; */ -
/* background-color: white; */ -
pointer-events: none; -
opacity: 1.0;
}
···
On Thursday, January 18, 2018 at 12:54:16 PM UTC-6, Bryan Van de ven wrote:
Hi,
Sending custom CSS rules with a Bokeh document is a current open issue that we hope to address soon. For now there is no option but to use a custom template that includes the CSS rules you want to add. Using a template looks different depending on how you are using Bokeh (a server app? embedded components in a web app? standalone HTML output? notebook?) If you can be more specific I can try to point to more specific guidance.
Thanks,
Bryan
On Jan 18, 2018, at 12:45, Charles [email protected] wrote:
Any quick tip on how to go back and edit the inherited values for the tooltip like border and background-color? When I getElementsByClassName(‘bk-tooltip’)[0] it only has the attributes listed above in the style property, with display coming on and off depending on whats happening. In the browser developer tools I can obviously toggle/cahnge these properties and get the effect I want but I’m still lost on how to access and change the .bk-tooltip properties with the given document
On Tuesday, January 16, 2018 at 3:26:02 PM UTC-6, Bryan Van de ven wrote:
Hi, unfortunately this is not easily configurable at the moment. The CSS selector you want to target is .bk-toolip, as shown below:
Specifically the border is controlled by the “border” property which is that e5e5e5 light grey by default.
Thanks,
Bryan
On Jan 15, 2018, at 09:56, Charles [email protected] wrote:
Not really very knowledegable on CSS or what Bokeh is doing exactly when utilizing a custom tooltip.
I created one and would like to get rid of the white box that’s surrounding my tooltip. Any ideas?
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0441afaf-a97a-4d41-a943-8bb6484a0c1b%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8e298410-459c-4a24-b4ac-90521fc4db54%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
Hi,
No the bokeh.min.css is the fixed default CSS that we build and ship. Generally users will not modify that unless they are building an delivering a custom BokehJS. Much more commonly you would override the defaults by providing additional CSS rules in a template. You can see an example of a template for a Bokeh server app here:
https://github.com/bokeh/bokeh/blob/master/examples/app/crossfilter/templates/index.html
It will be easiest if your app is "directory format" like that one, then a template in the "templates" directory will just get used automatically.
Thanks,
Bryan
···
On Jan 18, 2018, at 13:09, Charles <[email protected]> wrote:
Using Bokeh server to run a web app. The only element that seems to exist on the document is with the bk-tooltip class is the left or right actual arrow indicator for the custom tooltip. If I obtain that element, is it possible to access/change these values with a callback or is this the wrong approach? Not savvy with CSS but it looks like I want to edit the source @ bokeh.min.css?
.bk-root .bk-tooltip {
• font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
• font-weight: 300;
• font-size: 12px;
• position: absolute;
• padding: 5px;
• /* border: 1px solid #e5e5e5; */
• /* background-color: white; */
• pointer-events: none;
• opacity: 1.0;
}On Thursday, January 18, 2018 at 12:54:16 PM UTC-6, Bryan Van de ven wrote:
Hi,Sending custom CSS rules with a Bokeh document is a current open issue that we hope to address soon. For now there is no option but to use a custom template that includes the CSS rules you want to add. Using a template looks different depending on how you are using Bokeh (a server app? embedded components in a web app? standalone HTML output? notebook?) If you can be more specific I can try to point to more specific guidance.
Thanks,
Bryan
> On Jan 18, 2018, at 12:45, Charles <[email protected]> wrote:
>
>
>
> Any quick tip on how to go back and edit the inherited values for the tooltip like border and background-color? When I getElementsByClassName('bk-tooltip')[0] it only has the attributes listed above in the style property, with display coming on and off depending on whats happening. In the browser developer tools I can obviously toggle/cahnge these properties and get the effect I want but I'm still lost on how to access and change the .bk-tooltip properties with the given document
>
> On Tuesday, January 16, 2018 at 3:26:02 PM UTC-6, Bryan Van de ven wrote:
>
> Hi, unfortunately this is not easily configurable at the moment. The CSS selector you want to target is .bk-toolip, as shown below:
>
>
>
>
> Specifically the border is controlled by the "border" property which is that e5e5e5 light grey by default.
>
> Thanks,
>
> Bryan
>
>> On Jan 15, 2018, at 09:56, Charles <[email protected]> wrote:
>>
>>
>>
>> Not really very knowledegable on CSS or what Bokeh is doing exactly when utilizing a custom tooltip.
>>
>>
>>
>> I created one and would like to get rid of the white box that's surrounding my tooltip. Any ideas?
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
>> To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
>> To post to this group, send email to bo...@continuum.io.
>> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0441afaf-a97a-4d41-a943-8bb6484a0c1b%40continuum.io\.
>> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
>
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8e298410-459c-4a24-b4ac-90521fc4db54%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/04a126fc-90c2-449f-a735-1241cb751ee0%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
That worked like a charm, thanks for all your help!
···
On Thursday, January 18, 2018 at 1:16:31 PM UTC-6, Bryan Van de ven wrote:
Hi,
No the bokeh.min.css is the fixed default CSS that we build and ship. Generally users will not modify that unless they are building an delivering a custom BokehJS. Much more commonly you would override the defaults by providing additional CSS rules in a template. You can see an example of a template for a Bokeh server app here:
[https://github.com/bokeh/bokeh/blob/master/examples/app/crossfilter/templates/index.html](https://github.com/bokeh/bokeh/blob/master/examples/app/crossfilter/templates/index.html)It will be easiest if your app is “directory format” like that one, then a template in the “templates” directory will just get used automatically.
Thanks,
Bryan
On Jan 18, 2018, at 13:09, Charles [email protected] wrote:
Using Bokeh server to run a web app. The only element that seems to exist on the document is with the bk-tooltip class is the left or right actual arrow indicator for the custom tooltip. If I obtain that element, is it possible to access/change these values with a callback or is this the wrong approach? Not savvy with CSS but it looks like I want to edit the source @ bokeh.min.css?
.bk-root .bk-tooltip {
• font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;• font-weight: 300;• font-size: 12px;• position: absolute;• padding: 5px;• /* border: 1px solid #e5e5e5; */• /* background-color: white; */• pointer-events: none;• opacity: 1.0;}
On Thursday, January 18, 2018 at 12:54:16 PM UTC-6, Bryan Van de ven wrote:
Hi,
Sending custom CSS rules with a Bokeh document is a current open issue that we hope to address soon. For now there is no option but to use a custom template that includes the CSS rules you want to add. Using a template looks different depending on how you are using Bokeh (a server app? embedded components in a web app? standalone HTML output? notebook?) If you can be more specific I can try to point to more specific guidance.
Thanks,
Bryan
On Jan 18, 2018, at 12:45, Charles [email protected] wrote:
Any quick tip on how to go back and edit the inherited values for the tooltip like border and background-color? When I getElementsByClassName(‘bk-tooltip’)[0] it only has the attributes listed above in the style property, with display coming on and off depending on whats happening. In the browser developer tools I can obviously toggle/cahnge these properties and get the effect I want but I’m still lost on how to access and change the .bk-tooltip properties with the given document
On Tuesday, January 16, 2018 at 3:26:02 PM UTC-6, Bryan Van de ven wrote:
Hi, unfortunately this is not easily configurable at the moment. The CSS selector you want to target is .bk-toolip, as shown below:
Specifically the border is controlled by the “border” property which is that e5e5e5 light grey by default.
Thanks,
Bryan
On Jan 15, 2018, at 09:56, Charles [email protected] wrote:
Not really very knowledegable on CSS or what Bokeh is doing exactly when utilizing a custom tooltip.
I created one and would like to get rid of the white box that’s surrounding my tooltip. Any ideas?
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0441afaf-a97a-4d41-a943-8bb6484a0c1b%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8e298410-459c-4a24-b4ac-90521fc4db54%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/04a126fc-90c2-449f-a735-1241cb751ee0%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.