I was not certain which section to post this in, it could fit several. I ended up choosing API since I want the API to generate chat window buttons that have tool tips. I am going to be talking about several issues here, that are all different approaches to solving the same problem. I don't actually care which way the problem gets solved, just so long as I can get it solved in some way or another. Problem: I have an API routine that sends buttons to the chat window using the tipsy framework (using the class's showtip and tipsy). These buttons have very short labels, but have much more information in the tooltips that appear when the button is hovered over. By default tooltip is displayed centered above the button. The problem is that when the button ends up near the right edge of the chat window such that the right edge of the tooltip display would tend to go past the edge of the screen (this is with the chat window in it's default, non-popped out position at the right edge of the screen). The system does automatically shift the whole thing to to left so that the whole thing is displayed. The problem is that for some reason when it does that, the tooltip also always gets shifted down so that it is even with the BOTTOM of the button being hovered over. This means that the system thinks that the button is no longer being hovered over (because the tooltip is now being hovered over and the button is behind it). Thus the system removes the tooltip (because it thinks the button is not being hovered over). This allows the system to discover that it is once again hovering over a button with a hover action of creating a tooltip. Infinite loop as the system displays and removes the tooltip hundreds of times per second. This is extremely annoying. Further, while the system is busy displaying and removing the tooltip, the button that is under the tooltip is not very pressable. I estimate that about 3/4 of the time you attempt to press the button, it does not work (because you happened to press when the tooltip was over the button). But occasionally the button press will go through, though sometimes you have to try more than a half dozen times. I would like to fix this behaviour where the system gets into an infinite loop of displaying and removing tooltips over buttons. It would be nice if Roll20 figured out why, when the tooltip is too near the right edge of the screen to display centered above the button it no only moved the tooltip to the left, but also moved it down, and they fixed the problem. However in the absence of Roll20 fixing their bug, I had several ideas for working around it. Unfortunately I have not been able to make any of them work. I don't care how I make it work, but I would like something workable. (1) I have seen that some versions of tooltips that call themselves "tipsy" allow you to specify a "gravity". However in roll20's implementation I have not been able to figure out how to tell it that I want "gravity: west;". I don't even know what version of tipsy is being used, much less if it is possible for users to specify optional parameters or what they might be or how they are specified. I see no documentation on roll20's tipsy. (2) I thought I could just specify some classes in the tooltip that would format it, but that did not work. (3) I thought I could just make my own tooltips using a simple formula such as <a href="https://www.w3schools.com/css/css_tooltip.asp" rel="nofollow">https://www.w3schools.com/css/css_tooltip.asp</a> but realized the buttons I am sending all have inline styling, and I don't think you can specify optional styling such as on hover inline (Can you?). (4) I don't think the css is even ever applied to the chat window. I tried putting some css in such as .textchatcontainer a[href^="!"].sheet-ttip But I couldn't get anything to work, and don't think the css file even ever gets applied to the chat window. (Note, I am now using the legacy: false for the sheet- preprocessing.) So anyway, Does anybody have any ideas or is what I want impossible? Can I send any html to the chat window that will not appear unless some of the text is hovered over? Can I put something into the css file that will not be ignored in the chat window. Can the tipsy system be configured by the API coder that the tool tip is to the left instead of the top? Can roll20 be persuaded to fix the bug with the tipsy? Can roll20 be persuaded to avoid the bug by moving tipsy's to the left instead of the top? Ether as a default or at least as an option? I would greatly appreciate comments on even one aspect of this problem. For reference, this is the routine that I currently have making buttons. Note the Tipsy class usage near the bottom. // makeButton()
// Make a self contained html button that can be sent to the chat window.
// noColonFix true: don't do colonFix or encode, false: do colonFix and Encode it.
this.makeButton = function( buttonDisplayTxt, linkText, tipText, buttonColor, txtColor, noColonFix ) {
return new HtmlBuilder( "a", buttonDisplayTxt, Object.assign({}, {
href: noColonFix ? linkText : Earthdawn.encode( Earthdawn.colonFix( linkText )),
style: Object.assign({}, {
"padding": "0px, 3px",
"border": "1px solid black",
"margin": "1px, 0px",
"min-width": "auto",
"white-space": "nowrap"
},
buttonColor ? { "background-color": buttonColor } : {},
txtColor ? { "color": txtColor } : {} )},
tipText ? {
class: "showtip tipsy",
title: Earthdawn.encode( Earthdawn.encode( tipText )),
} : {})) + " ";
The above will create html similar to this. <a href="!Earthdawn~ setTokenò @{selected|token_id}~ ?{Type of damage|Damage|Stun} ò MA ò ?{Damage (Mystic Armor applies)|1}"
style="padding: 0px 3px ; border: 1px solid black ;
margin: 1px 0px ; min-width: auto ; white-space: nowrap ; background-color: red ; color: white"
class="userscript-showtip userscript-tipsy"
original-title="The Selected Token(s) take damage. Mystic Armor applies.">MA</a>
So the system appending the prefix userscript to the classes and original- to title. since I don't really know how to inspect an actual tooltip, I can't see what css tags they might have. Thanks
