When the user hovers over a help text question mark icon, Skuid displays that text in a little “tool tip” hover. Can anyone point me to the HTML/CSS content for that in Skuid? We’ve done some custom CSS and it’s affected those hovers, but I can’t pinpoint them. (I can’t do right-click Inspect Element because the hover immediately disappears, like a cruel magic trick.) Thanks!
Skuid Inline-Help Tooltips, and Row Action Tooltips, both internally leverage jQuery UI Tooltips. To modify the CSS of these Tooltips, you want to adjust the “.ui-tooltip” class and to modify the arrow, modify “.arrow”. Here are some examples from the jQuery UI Tooltip docs:
.ui-tooltip, .arrow:after { background: black; border: 2px solid white; } .ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; }
Perfect. Thanks Zach. It’s good to have the tooltips back.
