docs(PPDSC-2269): Tooltip documentation (#313)

* docs(PPDSC-2269): Tooltip documentation ui.

site/components/illustrations/components/button/usage/do3.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {getSSRId} from 'newskit';
+import {Svg} from '../../../svg';
+import {Path} from '../../../path';
+import {Rect} from '../../../rect';
+import {Circle} from '../../../circle';
+
+export const Do3: React.FC = () => {
+  const filter0 = getSSRId();
+
+  return (
+    <Svg
+      width="1490"
+      height="838"
+      viewBox="0 0 1490 838"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Rect width="1490" height="838" fill="illustrationBackground010" />
+      <Circle
+        cx="745.009"
+        cy="582.802"
+        r="88.4189"
+        fill="illustrationInterface020"
+      />
+      <Path
+        d="M772.643 601.472C769.095 601.472 765.92 602.872 763.492 605.067L730.203 585.691C730.436 584.617 730.623 583.543 730.623 582.423C730.623 581.302 730.436 580.228 730.203 579.155L763.118 559.966C765.64 562.3 768.954 563.747 772.643 563.747C780.393 563.747 786.649 557.491 786.649 549.741C786.649 541.991 780.393 535.734 772.643 535.734C764.893 535.734 758.636 541.991 758.636 549.741C758.636 550.861 758.823 551.935 759.056 553.009L726.141 572.198C723.62 569.864 720.305 568.416 716.617 568.416C708.866 568.416 702.61 574.673 702.61 582.423C702.61 590.173 708.866 596.429 716.617 596.429C720.305 596.429 723.62 594.982 726.141 592.648L759.383 612.07C759.15 613.05 759.01 614.078 759.01 615.105C759.01 622.622 765.126 628.738 772.643 628.738C780.16 628.738 786.276 622.622 786.276 615.105C786.276 607.588 780.16 601.472 772.643 601.472Z"
+        fill="illustrationHighlight010"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M518.209 159C482.747 159 454 187.747 454 223.209V360.222C454 395.684 482.747 424.431 518.209 424.431H705.313L744.965 464.083L784.617 424.431H971.791C1007.25 424.431 1036 395.684 1036 360.222V223.209C1036 187.747 1007.25 159 971.791 159H518.209Z"
+        fill="illustrationHighlight010"
+      />
+      <Path
+        d="M608.034 333.884C602.893 333.884 598.265 333.003 594.152 331.24C590.038 329.403 586.806 326.833 584.456 323.527C582.105 320.222 580.93 316.366 580.93 311.958H594.372C594.666 315.264 595.951 317.981 598.228 320.112C600.579 322.242 603.847 323.307 608.034 323.307C612.368 323.307 615.747 322.278 618.171 320.222C620.595 318.092 621.807 315.374 621.807 312.069C621.807 309.498 621.035 307.404 619.493 305.788C618.024 304.172 616.151 302.924 613.874 302.042C611.67 301.161 608.585 300.206 604.619 299.178C599.624 297.855 595.547 296.533 592.389 295.211C589.304 293.815 586.66 291.685 584.456 288.821C582.252 285.956 581.151 282.136 581.151 277.362C581.151 272.955 582.252 269.099 584.456 265.793C586.66 262.488 589.745 259.954 593.711 258.191C597.677 256.428 602.268 255.547 607.483 255.547C614.902 255.547 620.962 257.42 625.663 261.166C630.437 264.838 633.082 269.907 633.596 276.37H619.713C619.493 273.579 618.171 271.192 615.747 269.209C613.323 267.226 610.128 266.234 606.161 266.234C602.562 266.234 599.624 267.152 597.347 268.988C595.07 270.825 593.931 273.469 593.931 276.921C593.931 279.272 594.629 281.218 596.025 282.761C597.494 284.23 599.33 285.405 601.534 286.287C603.737 287.168 606.749 288.123 610.568 289.151C615.637 290.547 619.75 291.942 622.908 293.338C626.14 294.734 628.858 296.901 631.062 299.839C633.339 302.703 634.477 306.56 634.477 311.407C634.477 315.3 633.412 318.973 631.282 322.425C629.225 325.878 626.177 328.669 622.137 330.799C618.171 332.856 613.47 333.884 608.034 333.884Z"
+        fill="illustrationInterface020"
+      />
+      <Path
+        d="M680.699 271.412C685.327 271.412 689.44 272.404 693.039 274.387C696.712 276.37 699.577 279.309 701.633 283.202C703.763 287.095 704.829 291.796 704.829 297.304V333.113H692.378V299.178C692.378 293.742 691.019 289.592 688.302 286.727C685.584 283.789 681.874 282.32 677.174 282.32C672.473 282.32 668.726 283.789 665.935 286.727C663.217 289.592 661.859 293.742 661.859 299.178V333.113H649.298V251.58H661.859V279.455C663.989 276.885 666.67 274.901 669.902 273.506C673.207 272.11 676.806 271.412 680.699 271.412Z"
+        fill="illustrationInterface020"
+      />
+      <Path
+        d="M716.663 302.483C716.663 296.386 717.912 290.988 720.409 286.287C722.98 281.586 726.433 277.95 730.766 275.379C735.173 272.735 740.021 271.412 745.31 271.412C750.084 271.412 754.234 272.367 757.76 274.277C761.359 276.113 764.224 278.427 766.354 281.218V272.404H779.025V333.113H766.354V324.078C764.224 326.943 761.323 329.33 757.65 331.24C753.977 333.149 749.791 334.104 745.09 334.104C739.874 334.104 735.1 332.782 730.766 330.138C726.433 327.42 722.98 323.674 720.409 318.9C717.912 314.052 716.663 308.58 716.663 302.483ZM766.354 302.703C766.354 298.516 765.473 294.881 763.71 291.796C762.02 288.711 759.78 286.36 756.989 284.744C754.198 283.128 751.186 282.32 747.954 282.32C744.722 282.32 741.711 283.128 738.92 284.744C736.128 286.287 733.851 288.6 732.088 291.685C730.399 294.697 729.554 298.296 729.554 302.483C729.554 306.67 730.399 310.342 732.088 313.501C733.851 316.659 736.128 319.083 738.92 320.773C741.784 322.389 744.796 323.197 747.954 323.197C751.186 323.197 754.198 322.389 756.989 320.773C759.78 319.157 762.02 316.806 763.71 313.721C765.473 310.563 766.354 306.89 766.354 302.703Z"
+        fill="illustrationInterface020"
+      />
+      <Path
+        d="M808.083 281.218C809.919 278.133 812.343 275.746 815.355 274.057C818.44 272.294 822.076 271.412 826.262 271.412V284.414H823.067C818.146 284.414 814.4 285.662 811.829 288.16C809.332 290.657 808.083 294.991 808.083 301.161V333.113H795.522V272.404H808.083V281.218Z"
+        fill="illustrationInterface020"
+      />
+      <Path
+        d="M893.449 301.271C893.449 303.548 893.302 305.605 893.008 307.441H846.622C846.99 312.289 848.789 316.182 852.021 319.12C855.253 322.058 859.22 323.527 863.921 323.527C870.678 323.527 875.453 320.699 878.244 315.043H891.796C889.96 320.626 886.617 325.217 881.77 328.816C876.995 332.342 871.045 334.104 863.921 334.104C858.118 334.104 852.903 332.819 848.275 330.248C843.721 327.604 840.122 323.931 837.478 319.23C834.907 314.456 833.621 308.947 833.621 302.703C833.621 296.46 834.87 290.988 837.367 286.287C839.938 281.512 843.501 277.839 848.055 275.269C852.682 272.698 857.971 271.412 863.921 271.412C869.65 271.412 874.755 272.661 879.235 275.158C883.716 277.656 887.205 281.182 889.702 285.736C892.2 290.216 893.449 295.395 893.449 301.271ZM880.337 297.304C880.264 292.677 878.611 288.968 875.379 286.176C872.147 283.385 868.144 281.99 863.37 281.99C859.036 281.99 855.327 283.385 852.242 286.176C849.156 288.894 847.32 292.604 846.733 297.304H880.337Z"
+        fill="illustrationInterface020"
+      />
+      <g filter={`url(#${filter0})`}>
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M753.1 686.682L748.696 679.951C745.688 675.356 739.281 673.679 734.381 676.199L735.523 675.612C734.307 676.237 733.724 677.795 734.224 679.091L740.322 694.866C741.288 697.367 743.757 700.904 745.802 702.681C745.802 702.681 758.069 712.833 758.069 716.64V721.459H777.941H783.375H787.878H792.846V716.64C792.846 712.833 800.342 700.844 800.342 700.844C801.722 698.514 802.872 694.408 802.872 691.682V671.637C802.782 667.199 799.009 663.602 794.355 663.602C792.026 663.602 790.14 665.401 790.14 667.621V669.226C790.14 664.788 786.367 661.192 781.712 661.192C779.383 661.192 777.497 662.99 777.497 665.21V666.816C777.497 662.378 773.725 658.781 769.07 658.781C766.741 658.781 764.855 660.579 764.855 662.799V664.405C764.855 663.692 764.779 663.125 764.631 662.675L763.346 641.974C763.172 639.175 760.812 637 758.069 637C755.306 637 753.1 639.224 753.1 641.967V661.841V686.682Z"
+          fill="white"
+        />
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M735.559 675.684C739.503 674.24 744.116 675.24 747.139 678.094C747.722 678.646 748.247 679.267 748.695 679.952L753.1 686.682V641.968C753.1 639.225 755.306 637.001 758.068 637.001C760.812 637.001 763.172 639.176 763.346 641.975L764.631 662.676C764.644 662.717 764.657 662.758 764.669 662.8C764.792 663.229 764.855 663.757 764.855 664.406V662.8C764.855 662.754 764.856 662.708 764.857 662.662C764.858 662.642 764.859 662.622 764.86 662.601C764.968 660.474 766.811 658.782 769.07 658.782C769.511 658.782 769.945 658.814 770.368 658.876C771.366 659.024 772.307 659.338 773.156 659.788C775.275 660.909 776.832 662.876 777.329 665.211C777.439 665.73 777.497 666.267 777.497 666.816V665.211C777.497 662.991 779.383 661.192 781.712 661.192C781.899 661.192 782.085 661.198 782.269 661.21C783.544 661.289 784.741 661.638 785.799 662.198C787.917 663.32 789.475 665.287 789.971 667.622C790.082 668.14 790.139 668.677 790.139 669.227V667.622C790.139 665.401 792.026 663.603 794.354 663.603C794.542 663.603 794.727 663.609 794.912 663.62C799.307 663.894 802.785 667.378 802.872 671.638V691.683C802.872 694.409 801.722 698.515 800.342 700.845C800.342 700.845 792.846 712.834 792.846 716.641V721.46H758.068V716.641C758.068 712.834 745.802 702.681 745.802 702.681C743.757 700.905 741.288 697.368 740.321 694.867L734.224 679.092C733.89 678.227 734.039 677.245 734.536 676.502C734.706 676.248 734.916 676.022 735.162 675.838C735.294 675.784 735.426 675.732 735.559 675.684ZM734.381 676.199C734.637 676.068 734.898 675.947 735.162 675.838C735.275 675.754 735.395 675.678 735.523 675.612L734.381 676.199ZM731.699 670.983C728.508 673.287 727.241 677.56 728.663 681.241L734.761 697.016C736.074 700.414 739.105 704.761 741.893 707.183L741.947 707.229L742 707.273L742.001 707.274L742.023 707.292L742.111 707.366C742.191 707.433 742.312 707.535 742.469 707.668C742.782 707.934 743.236 708.324 743.782 708.804C744.881 709.77 746.327 711.08 747.756 712.485C749.212 713.916 750.527 715.325 751.436 716.501C751.748 716.905 751.965 717.22 752.107 717.448V727.421H798.807V716.742C798.808 716.767 798.809 716.78 798.812 716.781C798.833 716.784 798.942 716.224 799.507 714.892C800.105 713.479 800.944 711.808 801.84 710.146C802.727 708.503 803.621 706.96 804.297 705.822C804.633 705.255 804.913 704.794 805.106 704.477C805.203 704.319 805.278 704.198 805.327 704.117L805.382 704.029L805.397 704.006L805.435 703.945L805.472 703.883C806.513 702.124 807.32 699.984 807.869 698.006C808.417 696.032 808.834 693.761 808.834 691.683V671.577L808.832 671.517C808.673 663.642 802.06 657.641 794.354 657.641C793.092 657.641 791.859 657.875 790.711 658.309C788.21 656.367 785.052 655.231 781.712 655.231C780.45 655.231 779.216 655.465 778.069 655.898C775.799 654.136 772.99 653.038 769.994 652.849L769.296 641.605C768.926 635.642 763.94 631.039 758.068 631.039C751.999 631.039 747.139 635.946 747.139 641.968V670.908C742.749 668.722 737.467 668.411 732.82 670.355M752.309 717.819C752.307 717.818 752.297 717.797 752.281 717.755C752.302 717.799 752.31 717.819 752.309 717.819ZM731.699 670.983L731.655 670.897L732.797 670.31"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <filter
+          id={filter0}
+          x="664.212"
+          y="594.996"
+          width="207.764"
+          height="207.763"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="12.1957" />
+          <feGaussianBlur stdDeviation="12.1957" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.08 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1927_58946"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1927_58946"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </Svg>
+  );
+};
+
+export default Do3;

site/components/illustrations/components/tooltip/anatomy.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {Path} from '../../path';
+import {Rect} from '../../rect';
+
+export const Anatomy: React.FC = () => (
+  <Svg
+    width="1490"
+    height="838"
+    viewBox="0 0 1490 838"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <Rect width="1490" height="838" fill="illustrationBackground010" />
+    <Path
+      d="M1043.7 341.921H502.091C496.855 341.921 492.609 346.166 492.609 351.403V431.688C492.609 436.925 496.855 441.171 502.091 441.171H740.008C742.08 441.171 744.075 441.961 745.585 443.381L770.505 466.813C774.155 470.245 779.845 470.245 783.495 466.813L808.415 443.381C809.925 441.961 811.92 441.171 813.992 441.171H1043.7C1048.94 441.171 1053.18 436.925 1053.18 431.688V351.403C1053.18 346.166 1048.94 341.921 1043.7 341.921Z"
+      fill="illustrationInterface020"
+      stroke="#2B4AAB"
+      stroke-width="1.34109"
+    />
+    <Path
+      d="M551.446 392.104C551.446 388.33 555.745 385.271 561.048 385.271H993.117C998.42 385.271 1002.72 388.33 1002.72 392.104C1002.72 395.878 998.42 398.937 993.117 398.937H561.048C555.745 398.937 551.446 395.878 551.446 392.104Z"
+      fill="illustrationAnatomySubtle"
+    />
+    <Path
+      d="M329.446 392.104H422.225V394.255H329.446V392.104Z"
+      fill="illustrationPalette040"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M423.529 417.603C423.529 429.613 433.985 439.349 446.884 439.349L477.614 439.349C478.293 439.349 478.844 439.862 478.844 440.494C478.844 441.126 478.293 441.638 477.614 441.638L446.884 441.638C432.627 441.638 421.07 430.877 421.07 417.603L421.07 379C421.07 379 421.07 379 423.529 379L421.07 379C421.07 444.288 421.07 379 423.529 379L423.529 417.603Z"
+      fill="illustrationPalette040"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M423.529 364.615C423.529 352.605 433.985 342.869 446.884 342.869L477.614 342.869C478.293 342.869 478.844 342.357 478.844 341.725C478.844 341.093 478.293 340.58 477.614 340.58L446.884 340.58C432.628 340.58 421.07 351.341 421.07 364.615L421.07 409C421.07 409 421.071 409 423.529 409L421.07 409C421.07 409 421.071 409 423.529 409L423.529 364.615Z"
+      fill="illustrationPalette040"
+    />
+    <Rect
+      x="293.458"
+      y="373.948"
+      width="38.8915"
+      height="38.8915"
+      rx="19.4458"
+      fill="illustrationPalette040"
+    />
+    <Path
+      d="M310.789 390.29V387.673H315.212V399.69H312.37V390.29H310.789Z"
+      fill="white"
+    />
+    <Path
+      d="M777.131 489.489C779.338 489.465 781.12 487.792 781.12 485.731C781.12 483.655 779.312 481.972 777.082 481.972C774.853 481.972 773.045 483.655 773.045 485.731C773.045 487.792 774.827 489.465 777.034 489.489H775.929V576.484H778.236V489.489H777.131Z"
+      fill="illustrationPalette040"
+    />
+    <Rect
+      x="757.474"
+      y="576.484"
+      width="38.8915"
+      height="38.8915"
+      rx="19.4458"
+      fill="illustrationPalette040"
+    />
+    <Path
+      d="M773.071 593.532C773.114 592.459 773.49 591.632 774.201 591.051C774.912 590.469 775.875 590.179 777.092 590.179C777.899 590.179 778.588 590.309 779.159 590.57C779.74 590.83 780.176 591.186 780.467 591.637C780.768 592.088 780.919 592.594 780.919 593.156C780.919 593.817 780.741 594.359 780.386 594.78C780.031 595.191 779.616 595.471 779.142 595.622V595.682C779.756 595.872 780.241 596.188 780.596 596.629C780.951 597.07 781.129 597.637 781.129 598.328C781.129 598.95 780.973 599.501 780.66 599.982C780.359 600.453 779.912 600.824 779.32 601.095C778.739 601.366 778.044 601.501 777.237 601.501C775.945 601.501 774.912 601.205 774.136 600.614C773.372 600.022 772.968 599.13 772.925 597.937H775.606C775.617 598.378 775.751 598.729 776.01 598.99C776.268 599.24 776.645 599.366 777.14 599.366C777.56 599.366 777.883 599.255 778.109 599.035C778.346 598.804 778.464 598.504 778.464 598.133C778.464 597.652 778.297 597.306 777.964 597.095C777.641 596.875 777.119 596.764 776.397 596.764H775.88V594.674H776.397C776.946 594.674 777.388 594.589 777.721 594.419C778.066 594.238 778.238 593.923 778.238 593.472C778.238 593.111 778.13 592.83 777.915 592.63C777.7 592.429 777.404 592.329 777.027 592.329C776.618 592.329 776.311 592.444 776.107 592.675C775.913 592.905 775.8 593.191 775.767 593.532H773.071Z"
+      fill="white"
+    />
+    <Rect
+      x="545.728"
+      y="252"
+      width="39.2177"
+      height="36.5161"
+      rx="18.258"
+      fill="illustrationPalette040"
+    />
+    <Path
+      d="M561.706 274.295C562.06 274.015 562.221 273.885 562.189 273.906C563.207 273.065 564.007 272.374 564.588 271.834C565.18 271.294 565.679 270.728 566.084 270.136C566.489 269.544 566.691 268.967 566.691 268.407C566.691 267.981 566.593 267.649 566.395 267.41C566.198 267.171 565.902 267.051 565.508 267.051C565.113 267.051 564.801 267.202 564.573 267.503C564.355 267.794 564.246 268.209 564.246 268.749H561.675C561.696 267.867 561.883 267.129 562.236 266.537C562.6 265.945 563.072 265.509 563.654 265.229C564.246 264.948 564.9 264.808 565.617 264.808C566.852 264.808 567.782 265.125 568.405 265.758C569.039 266.392 569.355 267.218 569.355 268.235C569.355 269.347 568.976 270.38 568.218 271.335C567.46 272.28 566.494 273.205 565.321 274.108H569.527V276.274H561.706V274.295Z"
+      fill="white"
+    />
+    <Path
+      d="M566.491 286H564.184V366.808H565.297C563.086 366.828 561.3 368.503 561.3 370.567C561.3 372.643 563.108 374.326 565.337 374.326C567.567 374.326 569.374 372.643 569.374 370.567C569.374 368.503 567.588 366.828 565.377 366.808H566.491V286Z"
+      fill="illustrationPalette040"
+    />
+  </Svg>
+);
+
+export default Anatomy;