Increasing the font size on an html "title" attribute

Question

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

MORE DETAIL:

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.

Answer 1

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:

<style>
.tool_tip_text {
    font-size: 16px;
}
</style>

Comments

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:

<script>
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
        if(toolTipLink.attr('title'))
        {
            toolContent = toolTipLink.attr('title');
        }
        else
        {
            toolTipLink.attr('title', '');
            toolContent = jQuery(this).next(".tool_tip_text").clone().html();
        }
 
        $(this).tooltip({
            classes: {
                "ui-tooltip": "tool_tip_text"
            },
            content: toolContent,
            track: true,
            position: {my: "left+5 top+20"}
        });
    });
}
</script>

---

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!

---

thanks