HTML./CSS for hovers on help text?

  • 2
  • Question
  • Updated 5 years ago
  • Answered
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!
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
  • frustrated that I haven't worked this out

Posted 5 years ago

  • 2
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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;
}




Click here for more documentation on jQuery UI Tooltips.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Perfect. Thanks Zach. It's good to have the tooltips back.