sketchucation logo sketchucation
    • Login
    Oops, your profile's looking a bit empty! To help us tailor your experience, please fill in key details like your SketchUp version, skill level, operating system, and more. Update and save your info on your profile page today!
    🚨 Skimp | 25% Off until March 30 Buy Now

    HintCSS failing on Safari

    Scheduled Pinned Locked Moved Plugins
    2 Posts 2 Posters 294 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Rich O BrienR Offline
      Rich O Brien Moderator
      last edited by

      http://kushagragour.in/lab/hint/

      We use this in the next edition of the PluginStore but it fails on Mac...

      Anyone got any ideas?

      Download the free D'oh Book for SketchUp 📖

      1 Reply Last reply Reply Quote 0
      • TIGT Online
        TIG Moderator
        last edited by

        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 ?

        TIG

        1 Reply Last reply Reply Quote 0

        Hello! It looks like you're interested in this conversation, but you don't have an account yet.

        Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

        With your input, this post could be even better 💗

        Register Login
        • 1 / 1
        • First post
          Last post
        Buy SketchPlus
        Buy SUbD
        Buy WrapR
        Buy eBook
        Buy Modelur
        Buy Vertex Tools
        Buy SketchCuisine
        Buy FormFonts

        Advertisement