Bugzilla – Full Text Bug Listing
| Summary: | styling the tooltips | ||||||
|---|---|---|---|---|---|---|---|
| Product: | [ECD] Orion | Reporter: | Susan McCourt <susan> | ||||
| Component: | Client | Assignee: | Project Inbox <orion.client-inbox> | ||||
| Status: | RESOLVED WONTFIX | QA Contact: | |||||
| Severity: | normal | ||||||
| Priority: | P3 | CC: | antonm, ken_walker, Mike_Wilson | ||||
| Version: | 0.5 | ||||||
| Target Milestone: | --- | ||||||
| Hardware: | PC | ||||||
| OS: | Windows 7 | ||||||
| Whiteboard: | |||||||
| Attachments: |
|
||||||
The CSS I used is this (commands.css)
.claro .dijitTooltipContainer {
/* the part with the text */
background-color: #2e2e2e;
color: #fee49a;
background-image: none;
}
Here is a link to discussion about how to fix the pointy part:
http://dojo-toolkit.33424.n3.nabble.com/Give-different-background-color-to-Tooltip-td3379474.html
per bug 395340 we are now using our own tooltip rather than dijit. We do not use images, just a CSS triangle. For my first pass on this, I used a CSS pseudo-element to automatically generate a tail on a tooltip depending on its orientation. Since I can only generate one element, the triangle (and thus the rest of the tooltip for consistency) is just a flat color. I had to pick something that looked reasonable on the Orion content white, the dark banner, and the gray toolbar, because the tooltip tail and tooltip can overlay these colors. I picked a medium gray. I think it would be better to pick a color that we like and use a border to make sure that the tooltip pops when it's over a similar content color. This will require generating multiple tail elements to get the border, and possibly a shadow. We should also look at ideas for gradients, where we could gradiate to the tail color. I don't see us doing this for 2.0. Note that comment 1 and comment 2 are no longer relevant. The tooltip is generated with multiple divs to give the triangle/border effect, so we have lots of flexibility in how this is styled. The classes are tooltipTail* and tooltipTailBorder*...these control the color and border effect on the triangle. Closing as part of a mass clean up of inactive bugs. Please reopen if this problem still occurs or is relevant to you. For more details see: https://dev.eclipse.org/mhonarc/lists/orion-dev/msg03444.html Closing as part of a mass clean up of inactive bugs. Please reopen if this problem still occurs or is relevant to you. For more details see: https://dev.eclipse.org/mhonarc/lists/orion-dev/msg03444.html |
Created attachment 216242 [details] dark tooltip screenshot i've often wondered if a "light on dark" tooltip would look nicer in Orion. Many sites use the light on dark, such as gmail, twitter bootstrap, etc. Even the FF web inspect tool uses it, and it looks particularly nice there. So I tried an experiment using "orion gold selection" on "orion header charcoal". It looks pretty cool. The thing that makes it not be a "no-brainer" to change is that the pointy part of the tooltip is an image provided by dijit and it would have to be changed to match the color. There is also a blue hue in the border and we would want to play with changing that. We could also play with gradients. Attached is a screenshot of the simple experiment for inspiration.