Have an idea?

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

Increasing the font size on an html "title" attribute

How can I increase the font size on tooltip text (i.e., for the html "title" attribute)?


I'm creating my own tool tips to pop up when a respondent hovers over an info icon  E.g.,

My Feature <img src="[%GraphicsPath()%]info_icon.png" alt="" border="0" title="My tooltip text">

But the default font size is so small! I've tried a number of things like:

My Feature <img src="[%GraphicsPath()%]info_icon.png" alt="" border="0" title="My tooltip text" font size="10">

and had no success. It doesn't appear that there's a straightforward solution.
asked Nov 7, 2017 by ertingen Bronze (615 points)

1 Answer

+1 vote
Best answer
This is not possible using the title attribute, but you can achieve this effect by creating your own tooltip.  You can create the tooltip by scratch if you want, but Lighthouse Studio has a built-in ToolTip function that may be helpful for you.

You can create the image and tooltip with this:

[% ToolTip("<img src='" & GraphicsPath() & "info_icon.png'/>", "My tooltip text") %]

And then change the font size by adding this anywhere on the page:

.tool_tip_text {
    font-size: 16px;
answered Nov 7, 2017 by Zachary Platinum Sawtooth Software, Inc. (67,650 points)
selected Nov 8, 2017 by ertingen
This is great! Note for others: the tooltip pop-up text will NOT show in preview mode (but it will show when you actually test your survey)
How can I find the full list of attributes (like `font-size`, above) which are available for `.tool_tip_text`?
There are many CSS properties that can be used to modify how the tooltip looks.  This reference page from W3Schools may be helpful to you:


Is there something particular about the tooltip that you are interested in changing?
Bold, possibly. But mainly trying to figure out how you figured out the solution. Haven't used any CSS/HTML before and trying to get myself to self-serve status. Stuff isn't obvious to me. E.g., if I had gone to the link you shared, I would have just banged my head writing out `.tooltiptext` rather than `.tool_tip_text`. But that's all a tangent. Thx for your answer!
CSS uses font-weight for bolding:

font-weight: bold;

The W3Schools link can be a useful resource, but you can also Google CSS properties.  Searching "css how to bold / italicize / whatever" is a great way to get a quick reminder on how to do something you've forgotten.

Being able to determine the correct CSS selector (e.g., ".tool_tip_text") is a bit trickier, but you'll pick it up with practice.  When I need to get a CSS selector, I will usually start by right-clicking on the page element I'm interested in and then click "Inspect."    W3Schools also has a reference page on CSS selectors:


I know it's a lot, but I'd be happy to answer any more questions you come across as you become self-serving.
Thx for the link. I tried to answer this next question using the info at the link. No dice. Anyway, I found one problem with ToolTip() is that text bleeds out over the textbox. It seems like others are having this problem as well.
 I tried adapting this solution from <https://stackoverflow.com/questions/14538551/css-tooltips-wont-stretch-can-only-have-fixed-width>.  It involves `.tooltip` and `.toolcontent`. No dice. Any idea what's going on?
I am unable to reproduce this problem.  What version of SSI Web / Lighthouse Studio are you on?  Is there context of how you are using ToolTip that might help me reproduce this behavior?
I'm using SSI Web 8.4.8. This happens when you put a moderate amount of text in there (18 words for me). This happens regardless of browser (Chrome/FF/IE). Not sure what the issue could be.
I have not reproduced the problem on my end, but you may be able to resolve it by adding this to your survey's HTML head tag:

function SSI_SetupToolTips()
    var strLinkName = "";
    var strTipTextName = "";
    jQuery(".tool_tip_link").each(function ()
        var toolTipLink = $(this);
        var toolContent = "";
        //for jQueryUI tooltips to work you must have a title attribute
        //add an empty title attribute to the element if one doesnt exist
        //if it does exist, use it for the content of the tooltip
            toolContent = toolTipLink.attr('title');
            toolTipLink.attr('title', '');
            toolContent = jQuery(this).next(".tool_tip_text").clone().html();
            classes: {
                "ui-tooltip": "tool_tip_text"
            content: toolContent,
            track: true,
            position: {my: "left+5 top+20"}
Oddly, in my case this prevented any ToolTip from showing up. I tried <script language="JavaScript"> . That just led back to the old behavior. Very strange. I appreciate your help with this one Zachary!