js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Tooltip] Specify inherited CSS properties on host, fixes #773 (#774)

Browse Source 
* [Tooltip] Specify inherited CSS properties on host, fixes #773

* Remove unused `--show-delay` and `--hide-delay`
This commit is contained in:
Lea Verou
2025-03-10 15:08:27 -04:00
committed by GitHub
parent 1d600a77c4
commit e5c2884880
2 changed files with 7 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/tooltip/tooltip.css
View File

@@ -4,10 +4,16 @@
--max-width: 30ch;
--padding: var(--wa-space-2xs) var(--wa-space-xs);
/** These styles are added so we don't interfere in the DOM. */
display: inline-block;
position: absolute;
/** These styles are added so we dont interfere in the DOM. */
/** Defaults for inherited CSS properties */
color: var(--wa-tooltip-content-color);
font-size: var(--wa-tooltip-font-size);
line-height: var(--wa-tooltip-line-height);
text-align: start;
white-space: normal;
}
.tooltip {
@@ -41,12 +47,6 @@
max-width: var(--max-width);
border-radius: var(--border-radius);
background-color: var(--background-color);
font: inherit;
color: var(--wa-tooltip-content-color);
font-size: var(--wa-tooltip-font-size);
line-height: var(--wa-tooltip-line-height);
text-align: start;
white-space: normal;
padding: var(--padding);
user-select: none;
-webkit-user-select: none;

3
src/components/tooltip/tooltip.ts
View File

@@ -35,11 +35,8 @@ import styles from './tooltip.css';
*
* @cssproperty --background-color - The tooltip's background color.
* @cssproperty --border-radius - The radius of the tooltip's corners.
* @cssproperty --text-color - The color of the tooltip's content.
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
* @cssproperty --padding - The padding within the tooltip.
* @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
* @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
*/
@customElement('wa-tooltip')
export default class WaTooltip extends WebAwesomeElement {