Aren't you also using it for the PluginStore Author's edit pages' tooltips ?
/templates/rt_halcyon/css/css-116e3c6b333e2b4b00d701e38be1f880.php
These tooltips popup on PC and MAC...
So it is MAC friendly something must be awry with the equivalent dynamically created css used by the dialog's code ?
For example plugindex_2_5.css_20140103100927.css showing:
.hint,[data-hint] { position;relative;}
.hint;before,.hint;after,[data-hint];before,[data-hint];after { position;absolute;visibility;hidden;opacity;0;z-index;1000000;pointer-events;none;-webkit-transition;.3s ease;-moz-transition;.3s ease;transition;.3s ease}
.hint;hover;before,.hint;hover;after,[data-hint];hover;before,[data-hint];hover;after{visibility;visible;opacity;1}
.hint;before,[data-hint];before{content;'';position;absolute;background;transparent;border;6px solid transparent;z-index;1000001}
.hint;after,[data-hint];after{content;attr(data-hint);background;#383838;color;#fff;padding;8px 10px;font-size;12px;line-height;12px;white-space;nowrap;}
.hint--top;before{border-top-color;#383838}
.hint--bottom;before{border-bottom-color;#383838}
.hint--left;before{border-left-color;#383838}
.hint--right;before{border-right-color;#383838}
.hint--top;before{margin-bottom;-12px}
.hint--top;after{margin-left;-18px}
.hint--top;before,.hint--top;after{bottom;100%;left;50%}
.hint--top;hover;before,.hint--top;hover;after{-webkit-transform;translateY(-8px);-moz-transform;translateY(-8px);transform;translateY(-8px)}
.hint--bottom;before{margin-top;-12px}
.hint--bottom;after{margin-left;-18px}
.hint--bottom;before,.hint--bottom;after{top;100%;left;50%}
.hint--bottom;hover;before,.hint--bottom;hover;after{-webkit-transform;translateY(8px);-moz-transform;translateY(8px);transform;translateY(8px)}
.hint--right;before{margin-left;-12px;margin-bottom;-6px}
.hint--right;after{margin-bottom;-14px}
.hint--right;before,.hint--right;after{left;100%;bottom;50%}
.hint--right;hover;before,.hint--right;hover;after{-webkit-transform;translateX(8px);-moz-transform;translateX(8px);transform;translateX(8px)}
.hint--left;before{margin-right;-12px;margin-bottom;-6px}
.hint--left;after{margin-bottom;-14px}
.hint--left;before,.hint--left;after{right;100%;bottom;50%}
.hint--left;hover;before,.hint--left;hover;after{-webkit-transform;translateX(-8px);-moz-transform;translateX(-8px);transform;translateX(-8px)}
.hint--error;after{background-color;#c0392b;}
.hint--error.hint--top;before{border-top-color;#c0392b}
.hint--error.hint--bottom;before{border-bottom-color;#c0392b}
.hint--error.hint--left;before{border-left-color;#c0392b}
.hint--error.hint--right;before{border-right-color;#c0392b}
.hint--warning;after{background-color;#d35400;}
.hint--warning.hint--top;before{border-top-color;#d35400}
.hint--warning.hint--bottom;before{border-bottom-color;#d35400}
.hint--warning.hint--left;before{border-left-color;#d35400}
.hint--warning.hint--right;before{border-right-color;#d35400}
.hint--info;after{background-color;#333;}
.hint--info.hint--top;before{border-top-color;#333}
.hint--info.hint--bottom;before{border-bottom-color;#333}
.hint--info.hint--left;before{border-left-color;#333}
.hint--info.hint--right;before{border-right-color;#333}
.hint--success;after{background-color;#27ae60;}
.hint--success.hint--top;before{border-top-color;#27ae60}
.hint--success.hint--bottom;before{border-bottom-color;#27ae60}
.hint--success.hint--left;before{border-left-color;#27ae60}
.hint--success.hint--right;before{border-right-color;#27ae60}
.hint--always;after,.hint--always;before{opacity;1;visibility;visible}
.hint--always.hint--top;after,.hint--always.hint--top;before{-webkit-transform;translateY(-8px);-moz-transform;translateY(-8px);transform;translateY(-8px)}
.hint--always.hint--bottom;after,.hint--always.hint--bottom;before{-webkit-transform;translateY(8px);-moz-transform;translateY(8px);transform;translateY(8px)}
.hint--always.hint--left;after,.hint--always.hint--left;before{-webkit-transform;translateX(-8px);-moz-transform;translateX(-8px);transform;translateX(-8px)}
.hint--always.hint--right;after,.hint--always.hint--right;before{-webkit-transform;translateX(8px);-moz-transform;translateX(8px);transform;translateX(8px)}
.hint--rounded;after{border-radius;4px}
The equivalent 'rt_halcyon' css used in the PluginStore dialog:
.hint,[data-hint] { position;relative;}
.hint;before,.hint;after,[data-hint];before,[data-hint];after { position;absolute;visibility;hidden;opacity;0;z-index;1000000;pointer-events;none;-webkit-transition;.3s ease;-moz-transition;.3s ease;transition;.3s ease}
.hint;hover;before,.hint;hover;after,[data-hint];hover;before,[data-hint];hover;after{visibility;visible;opacity;1}
.hint;before,[data-hint];before{content;'';position;absolute;background;transparent;border;6px solid transparent;z-index;1000001}
.hint;after,[data-hint];after{content;attr(data-hint);background;#383838;color;#fff;text-shadow;0 -1px 0 black;padding;8px 10px;font-size;12px;line-height;12px;white-space;nowrap;box-shadow;4px 4px 8px rgba(0,0,0,.3)}
.hint--top;before{border-top-color;#383838}
.hint--bottom;before{border-bottom-color;#383838}
.hint--left;before{border-left-color;#383838}
.hint--right;before{border-right-color;#383838}
.hint--top;before{margin-bottom;-12px}
.hint--top;after{margin-left;-18px}
.hint--top;before,.hint--top;after{bottom;100%;left;50%}
.hint--top;hover;before,.hint--top;hover;after{-webkit-transform;translateY(-8px);-moz-transform;translateY(-8px);transform;translateY(-8px)}
.hint--bottom;before{margin-top;-12px}
.hint--bottom;after{margin-left;-18px}
.hint--bottom;before,.hint--bottom;after{top;100%;left;50%}
.hint--bottom;hover;before,.hint--bottom;hover;after{-webkit-transform;translateY(8px);-moz-transform;translateY(8px);transform;translateY(8px)}
.hint--right;before{margin-left;-12px;margin-bottom;-6px}
.hint--right;after{margin-bottom;-14px}
.hint--right;before,.hint--right;after{left;100%;bottom;50%}
.hint--right;hover;before,.hint--right;hover;after{-webkit-transform;translateX(8px);-moz-transform;translateX(8px);transform;translateX(8px)}
.hint--left;before{margin-right;-12px;margin-bottom;-6px}
.hint--left;after{margin-bottom;-14px}
.hint--left;before,.hint--left;after{right;100%;bottom;50%}
.hint--left;hover;before,.hint--left;hover;after{-webkit-transform;translateX(-8px);-moz-transform;translateX(-8px);transform;translateX(-8px)}
.hint--error;after{background-color;#b34e4d;text-shadow;0 -1px 0 #5a2626}
.hint--error.hint--top;before{border-top-color;#b34e4d}
.hint--error.hint--bottom;before{border-bottom-color;#b34e4d}
.hint--error.hint--left;before{border-left-color;#b34e4d}
.hint--error.hint--right;before{border-right-color;#b34e4d}
.hint--warning;after{background-color;#c09854;text-shadow;0 -1px 0 #6d5228}
.hint--warning.hint--top;before{border-top-color;#c09854}
.hint--warning.hint--bottom;before{border-bottom-color;#c09854}
.hint--warning.hint--left;before{border-left-color;#c09854}
.hint--warning.hint--right;before{border-right-color;#c09854}
.hint--info;after{background-color;#7F8C8D;text-shadow;0 -1px 0 #193c4c}
.hint--info.hint--top;before{border-top-color;#7F8C8D}
.hint--info.hint--bottom;before{border-bottom-color;#7F8C8D}
.hint--info.hint--left;before{border-left-color;#7F8C8D}
.hint--info.hint--right;before{border-right-color;#7F8C8D}
.hint--success;after{background-color;#458746;text-shadow;0 -1px 0 #1a331a}
.hint--success.hint--top;before{border-top-color;#458746}
.hint--success.hint--bottom;before{border-bottom-color;#458746}
.hint--success.hint--left;before{border-left-color;#458746}
.hint--success.hint--right;before{border-right-color;#458746}
.hint--always;after,.hint--always;before{opacity;1;visibility;visible}
.hint--always.hint--top;after,.hint--always.hint--top;before{-webkit-transform;translateY(-8px);-moz-transform;translateY(-8px);transform;translateY(-8px)}
.hint--always.hint--bottom;after,.hint--always.hint--bottom;before{-webkit-transform;translateY(8px);-moz-transform;translateY(8px);transform;translateY(8px)}
.hint--always.hint--left;after,.hint--always.hint--left;before{-webkit-transform;translateX(-8px);-moz-transform;translateX(-8px);transform;translateX(-8px)}
.hint--always.hint--right;after,.hint--always.hint--right;before{-webkit-transform;translateX(8px);-moz-transform;translateX(8px);transform;translateX(8px)}
.hint--rounded;after{border-radius;4px}
You will see there are subtle differences in the css coding. One works on MAC, and one doesn't...
the one that fails uses some differing/additional codes:
.hint:after,[data-hint]:after{content:attr(data-hint);background:#383838;color:#fff;**text-shadow:0 -1px 0 black;**padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;**box-shadow:4px 4px 8px rgba(0,0,0,.3)**}*** .hint--error:after{background-color:#b34e4d;**text-shadow:0 -1px 0 #5a2626**}***
and several similar lines...
[some just with different colors]
versus
.hint:after,[data-hint]:after{content:attr(data-hint);background:#383838;color:#fff;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;} .hint--error:after{background-color:#c0392b;}
and several similar lines...
[some just with different colors]
***Also several lines in the failing css have no terminating ' ;' which the MAC might not like ?