Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Tooltip CSS code to modify format in Lighthouse 9

Hi, I want to change the background color, font size , family and weight of the tooltip box in version 9. I looked at the CSS file from the template used (apollo), but can't figure out what piece to modify. There are many different lines starting with .nvtooltip. I changed a couple, but they don't seem to be the ones I need. I can't find one specific for the actual text inside the box or the box background color. Any help is appreciated!
asked Jul 13, 2017 by rinsights Bronze (890 points)
retagged Jul 13, 2017 by Walter Williams

1 Answer

+1 vote
Does this CSS example help ...
.tool_tip_text
{
    font-size: 12px;
    font-family: "Arial";
    font-weight: bold;
    width: 200px;
    height: 60px;
    border: 1px solid #7F7F7F;
    background-color: #33DDCC;
    padding: 4px;
    text-align: center;
}
answered Jul 13, 2017 by Paul Moon Platinum (99,385 points)
Thank you Paul. I found the area of this code in the CSS file. I have been trying to align the text vertically as well so it falls in the middle of the box (originally even with center is aligned at the bottom), and I used this code below, but now the box is empty, no text is showing. What is wrong with this code?

.tool_tip_text
{
    font-size: 16px;
        font-weight: bold;
    max-width: auto;
    height: auto;
    border: 1px solid #7F7F7F;
    background-color: #edf7f6;
    text-align: center;
        padding: 4px;
        height: 100px;
        line-height: 100px; 
        vertical-align: middle;
    z-index: 1000;
    display: none;
}
I could assist with the more standard properties of the tool tips but I'm not familiar with the vertical alignment property?

I always have my tool tips appearing horizontally.

I would remove the properties you do not need.

For starters, the "display: none;" property is probably why you have the tool tip not appearing? I would remove it and re-test.
What I meant was that the text inside the box shows closer to the bottom margin, with a lot of margin at the top, so I just want to show the text horizontally, but in the middle of the text box with similar margins at the top and the bottom.
Have you tried to move it using the pixel option ...

vertical-align: 10px;
vertical-align: -25px;

My CSS is average at best. If you have further difficulties, touch base with Zachary Anderson at Sawtooth Software as he has excellent skills in this area: zachary@sawtoothsoftware.com.

As mentioned earlier, I could assist with your basic properties that you requested: background color, font size , family and weight. These I am familiar with.
Thank you Paul!
It sounds like Paul's code has been working for you so far.  What problems remain?
Please check the email I sent you.
...