fix(docs): Move to `data-tooltip` for profiler.

* Fix ESLint warning by using `data-` prefixed custom attr.
This commit is contained in:
Peter Johanson 2022-10-26 13:55:47 +00:00 committed by Pete Johanson
parent 2d7c8f6073
commit a02eb28271
3 changed files with 12 additions and 12 deletions

View File

@ -34,7 +34,7 @@ function CustomBoardForm({
<div className="profilerInput"> <div className="profilerInput">
<label> <label>
Output Voltage{" "} Output Voltage{" "}
<span tooltip="Output Voltage of the PSU used by the system"> <span data-tooltip="Output Voltage of the PSU used by the system">
</span> </span>
</label> </label>
@ -45,7 +45,7 @@ function CustomBoardForm({
<div className="profilerInput"> <div className="profilerInput">
<label> <label>
PSU Efficiency{" "} PSU Efficiency{" "}
<span tooltip="The estimated efficiency with a VIN of 3.8 and the output voltage entered above"> <span data-tooltip="The estimated efficiency with a VIN of 3.8 and the output voltage entered above">
</span> </span>
</label> </label>
@ -64,7 +64,7 @@ function CustomBoardForm({
<div className="profilerInput"> <div className="profilerInput">
<label> <label>
PSU Quiescent{" "} PSU Quiescent{" "}
<span tooltip="The standby usage of the PSU"></span> <span data-tooltip="The standby usage of the PSU"></span>
</label> </label>
<div className="inputBox"> <div className="inputBox">
<input {...bindQuiescentMicroA} type="number" /> <input {...bindQuiescentMicroA} type="number" />
@ -74,7 +74,7 @@ function CustomBoardForm({
<div className="profilerInput"> <div className="profilerInput">
<label> <label>
Other Quiescent{" "} Other Quiescent{" "}
<span tooltip="Any other standby usage of the board (voltage dividers, extra ICs, etc)"> <span data-tooltip="Any other standby usage of the board (voltage dividers, extra ICs, etc)">
</span> </span>
</label> </label>

View File

@ -26,12 +26,12 @@
font-size: 14px; font-size: 14px;
} }
span[tooltip] { span[data-tooltip] {
position: relative; position: relative;
} }
span[tooltip]::before { span[data-tooltip]::before {
content: attr(tooltip); content: attr(data-tooltip);
font-size: 13px; font-size: 13px;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
@ -47,7 +47,7 @@ span[tooltip]::before {
left: 50%; left: 50%;
} }
span[tooltip]::after { span[data-tooltip]::after {
content: ""; content: "";
position: absolute; position: absolute;
border-top: 8px solid var(--ifm-background-surface-color); border-top: 8px solid var(--ifm-background-surface-color);
@ -62,12 +62,12 @@ span[tooltip]::after {
left: 50%; left: 50%;
} }
span[tooltip]:hover::before { span[data-tooltip]:hover::before {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
span[tooltip]:hover::after { span[data-tooltip]:hover::after {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }

View File

@ -155,7 +155,7 @@ function PowerProfiler() {
<div className="profilerInput"> <div className="profilerInput">
<label> <label>
Bonded Bluetooth Profiles{" "} Bonded Bluetooth Profiles{" "}
<span tooltip="The average number of host devices connected at once"> <span data-tooltip="The average number of host devices connected at once">
</span> </span>
</label> </label>
@ -167,7 +167,7 @@ function PowerProfiler() {
<div className="profilerInput"> <div className="profilerInput">
<label> <label>
Percentage Asleep{" "} Percentage Asleep{" "}
<span tooltip="How much time the keyboard is in deep sleep (15 min. default timeout)"> <span data-tooltip="How much time the keyboard is in deep sleep (15 min. default timeout)">
</span> </span>
</label> </label>