Tipsy tooltip

Hopefully a quick one - Is there a way to force the inline tooltip to justify left instead of center? I tried 'showtip tipsy-n-left' but no luck. In fact, I can't find the specs on how to invoke the tipsy library/classes ... if you can point me there I can try to figure it out myself. Thank you!

You can put html into the tip, but you have to use <span> tags to build the output (use them like <div> elements). You can see an example of this in the Inspector script:     const getTip = (contents, label, header = 'Info', contentcss = {}) => {         let contentCSS = Object.assign(_.clone(localCSS.tipContent), contentcss);         return html.tip(             label,             html.span( // container                 html.span( // bounding                     html.span( // header line                         html.span( // left (logo)                             html.span('', localCSS.tipLogoImg),                             localCSS.tipLogoSpan) +                         html.span( // right (content)                             header,                             localCSS.tipHeaderTitle),                         localCSS.tipHeaderLine) +                     html.span( // content line                         html.span( // content cell                             contents,                             contentCSS),                         localCSS.tipContentLine),                     localCSS.tipBounding),                 localCSS.tipContainer),             { 'display': 'inline-block' }         );     };

That's a cool tip! I think I'll have to remember that when building an interface.

timmaugh said: You can put html into the tip, but you have to use <span> tags to build the output (use them like <div> elements). You can see an example of this in the Inspector script:     const getTip = (contents, label, header = 'Info', contentcss = {}) => {         let contentCSS = Object.assign(_.clone(localCSS.tipContent), contentcss);         return html.tip(             label,             html.span( // container                 html.span( // bounding                     html.span( // header line                         html.span( // left (logo)                             html.span('', localCSS.tipLogoImg),                             localCSS.tipLogoSpan) +                         html.span( // right (content)                             header,                             localCSS.tipHeaderTitle),                         localCSS.tipHeaderLine) +                     html.span( // content line                         html.span( // content cell                             contents,                             contentCSS),                         localCSS.tipContentLine),                     localCSS.tipBounding),                 localCSS.tipContainer),             { 'display': 'inline-block' }         );     }; Hmm that's an amazing looking tooltip, but unfortunately it's well beyond my coding knowledge to use. Maybe I'll explain what I'm trying to do. I'm trying to mod Kurt J's ScriptCards tip-on-hover button functionality to use the bigger tipsy style instead of its original small tooltip. So I added the showtip class to the code:         if (customHoverText) { thisHoverText = ` class="showtip" title="${customHoverText}" ` }         return `<a style="${replaceStyleInformation(thisButtonStyle, parameters)}" ${thisHoverText}" href="${removeTags(removeBRs(url))}">${removeBRs(title)}</a>`; So that worked well in that it allowed a bigger tooltip, but it's center-aligned. I'm trying to change that to left-aligned, but I don't know enough about the code how to do that without major rewrite of the code. Any help here would be appreciated! By the way this is what the mod produced: <a class="userscript-showtip" href="link to the button target" original-title=" the tooltip text that i want to left align" style="background-color: #ffffff ; padding: 5px ; color: #800080 ; text-align: center ; vertical-align: middle ; border-radius: 5px ; border-color: #ffffff ; font-family: "tahoma" ; font-size: large"> button</a>