diff --git a/doc/jp/components/inputs/mask-input.md b/doc/jp/components/inputs/mask-input.md
index 9db4b6d54..69cf7073f 100644
--- a/doc/jp/components/inputs/mask-input.md
+++ b/doc/jp/components/inputs/mask-input.md
@@ -22,9 +22,9 @@ _language: ja
```cmd
npm install {PackageWebComponents}
```
-
`MaskInput` を使用する前に、次のように登録する必要があります:
+
```ts
import { defineComponents, IgcMaskInputComponent } from 'igniteui-webcomponents';
@@ -56,6 +56,23 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
```
+
+`MaskInput` を使用する前に、次のように登録する必要があります:
+
+```razor
+// in Program.cs file
+
+builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));
+```
+
+また、`MaskInput` コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります:
+
+```razor
+
+```
+
+
+
{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
### マスクのルール
@@ -78,7 +95,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
### マスクの適用
-マスクの適用は非常に簡単です。必要なことは、入力の `mask` プロパティに事前に決定されたパターンを提供することだけです。
+マスクの適用は非常に簡単です。必要なことは、入力の `Mask` プロパティに事前に決定されたパターンを提供することだけです。
以下の例では、内線番号付きの電話番号にマスクを適用します。
@@ -98,6 +115,13 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
```
+```razor
+
+
+ Phone number
+
+```
+
その後、ブラウザーに次のように表示されます:
`sample="/inputs/mask-input/applying-mask", height="150", alt="{Platform} マスク入力マスクの適用の例"`
@@ -106,7 +130,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
### プロンプト文字
-開発者は、マスクの塗りつぶされていない部分に使用されるプロンプト シンボルをカスタマイズできます。これを行うには、`prompt` プロパティに任意の文字を指定するだけです:
+開発者は、マスクの塗りつぶされていない部分に使用されるプロンプト シンボルをカスタマイズできます。これを行うには、`Prompt` プロパティに任意の文字を指定するだけです:
```html
@@ -116,11 +140,15 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
```
+```razor
+
+```
+
デフォルトでは、`prompt` 文字はアンダースコアです。
### プレースホルダー
-開発者は、ネイティブ入力プレースホルダー属性の目的を果たす `placeholder` プロパティを利用することもできます。プレースホルダーに値が指定されていない場合は、マスクの値がそのまま使用されます。
+開発者は、ネイティブ入力プレースホルダー属性の目的を果たす `Placeholder` プロパティを利用することもできます。プレースホルダーに値が指定されていない場合は、マスクの値がそのまま使用されます。
```html
@@ -130,9 +158,13 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
```
+```razor
+
+```
+
### 値モード
-IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために `raw` および `withFormatting` オプションを選択できる `valueMode` プロパティを公開します。デフォルトでは、`valueMode` は *raw* に設定されています。以下の例をご覧ください:
+IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために `raw` および `withFormatting` オプションを選択できる `ValueMode` プロパティを公開します。デフォルトでは、`ValueMode` は *raw* に設定されています。以下の例をご覧ください:
`sample="/inputs/mask-input/value-modes", height="150", alt="{Platform} マスク入力値モードの例"`
diff --git a/doc/jp/components/inputs/tooltip.md b/doc/jp/components/inputs/tooltip.md
index 000038f02..205172e78 100644
--- a/doc/jp/components/inputs/tooltip.md
+++ b/doc/jp/components/inputs/tooltip.md
@@ -52,11 +52,27 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
+
-これで、{Platform} `Tooltip` の基本構成から始めることができます。
+`Tooltip` を使用する前に、次のように登録する必要があります:
+
+```razor
+// in Program.cs file
+
+builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));
+```
+
+また、`Tooltip` コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります:
+
+```razor
+
+```
-
+
+
+{ProductName} の完全な概要については、[「作業の開始」](../general-getting-started.md)トピックを参照してください。
+
+これで、{Platform} `Tooltip` の基本構成から始めることができます。
```html
@@ -74,13 +90,19 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
Hover me
```
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+```razor
+
+ Congrats you have hovered the button!
+
+
+Hover me
+```
## 使用方法
### ツールチップ ターゲット
-目的の要素にツールチップを添付するには、**<igc-tooltip>****<IgrTooltip>** 要素の `Anchor` プロパティを使用します。このプロパティは、要素 ID または要素への直接参照のいずれかを受け入れます。ID 参照を使用する場合は、`Anchor` プロパティをターゲット要素の ID に設定するだけです。
+目的の要素にツールチップを添付するには、`Tooltip` の `Anchor` プロパティを使用し、それをターゲット要素の ID に設定します。
```html
Hover me
@@ -96,7 +118,16 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
```
-要素インスタンスを直接渡すことでターゲットを指定することもできます。
+```razor
+Hover me
+
+ Congrats you have hovered the button!
+
+```
+
+
+要素インスタンスを直接渡すことでターゲットを指定することもできます。
+
```html
@@ -128,7 +159,7 @@ tooltip.anchor = anchor;
### ツールチップのコンテンツ
-ツールチップのコンテンツは、**<igc-tooltip>****<IgrTooltip>** 要素の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。
+ツールチップのコンテンツは、`Tooltip` の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。
```html
@@ -142,7 +173,15 @@ tooltip.anchor = anchor;
```
+```razor
+
+ Congrats you have hovered the button!
+
+```
+
+
あるいは、単純なテキストを設定するには、`Message` プロパティを使用できます。
+
```html
@@ -152,7 +191,9 @@ tooltip.anchor = anchor;
```
+
両方の方法 (スロット化されたコンテンツと `Message` プロパティ) を使用する場合、スロット化されたコンテンツが優先され、`Message` 値は無視されます。
+
```html
Hover me
@@ -168,7 +209,9 @@ tooltip.anchor = anchor;
```
-この例では、スロット化されたコンテンツ 「I will be shown!」 が `Message` プロパティ値の代わりに表示されます。
+
+この例では、スロット化されたコンテンツ「I will be shown!」が `Message` プロパティ値の代わりに表示されます。
+
`Tooltip` のコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。
@@ -185,37 +228,52 @@ tooltip.anchor = anchor;
```
```tsx
-
+
Her name is Madelyn James.
```
+```razor
+
+ Her name is Madelyn James.
+
+```
+
> [!NOTE]
> Tooltip API メソッド (`Show`、`Hide`、`Toggle`) では、`ShowDelay` プロパティと `HideDelay` プロパティが考慮されないことに注意することが重要です。呼び出されるとすぐに動作します。
### 配置
-`Tooltip` は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、`Placement` プロパティを、`top`、`top-start`、`top-end`、`bottom`、`bottom-start`、`bottom-end `、`right`、`right-start`、`right-end`、`left`、`left-start`、`left-end` のいずれかの位置オプションとともに使用するだけです。
+`Tooltip` は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、`Placement` プロパティを、`top`、`top-start`、`top-end`、`bottom`、`bottom-start`、`bottom-end `、`right`、`right-start`、`right-end`、`left`、`left-start`、`left-end` のいずれかの配置オプションとともに使用するだけです。
`Placement` プロパティが設定されていない場合、デフォルト値は `bottom` となり、`Tooltip` はターゲット要素の下に配置されます。
さらに、`Sticky` プロパティを使用して `Tooltip` を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、`Esc` キーを押して手動で閉じるまで、`Tooltip` が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに `Tooltip` が消えないようにします。
+`Tooltip` には、`WithArrow` プロパティを介して構成できるオプションの矢印インジケータも含まれています。矢印はツールチップをその anchor 要素に視覚的に接続し、その配置はツールチップの `Placement` に基づいて自動的に調整されます。
+
```html
Hover me
-
+
Congrats you've hovered the button!
```
```tsx
Hover me
-
+
Congrats you have hovered the button!
```
-次の例では、すべての位置オプションと `Sticky` プロパティの動作のデモを見ることができます。
+```razor
+Hover me
+
+ Congrats you have hovered the button!
+
+```
+
+次の例では、すべてのツールチップの配置オプション、矢印の配置動作、および `Sticky` プロパティの動作のデモを見ることができます。
`sample="/inputs/tooltip/placement", height="220", alt="{Platform} Tooltip 配置の例"`
@@ -234,12 +292,12 @@ tooltip.anchor = anchor;
### 追加のプロパティ
-これまでに説明したプロパティの他に、`Tooltip` コンポーネントには、動作、位置、外観をさらに構成できるさまざまな追加プロパティが用意されています。
+これまでに説明したプロパティの他に、`Tooltip` コンポーネントには、動作、配置、外観をさらに構成できるさまざまな追加プロパティが用意されています。
|名前|タイプ|説明|
|--|--|--|
| `Open` | boolean | ツールチップの表示/非表示を決定します。 |
-| `WithArrow` | boolean | **true** に設定すると、ツールチップの矢印インジケーターが有効になります。 |
+| `WithArrow` | boolean | ツールチップの矢印インジケーターをレンダリングするかどうかを決定します。 |
| `Offset` | number | ツールチップとその `Anchor` 間のピクセル距離を設定します。 |
### メソッド
diff --git a/docfx/jp/components/toc.json b/docfx/jp/components/toc.json
index e3975b5b6..15aa94c74 100644
--- a/docfx/jp/components/toc.json
+++ b/docfx/jp/components/toc.json
@@ -1562,7 +1562,8 @@
{
"exclude": ["Angular", "React"],
"name": "デバイダー",
- "href": "layouts/divider.md"
+ "href": "layouts/divider.md",
+ "status": "new"
},
{
"exclude": ["Angular", "Blazor"],
@@ -1746,9 +1747,10 @@
"status": "new"
},
{
- "exclude": ["Angular", "Blazor"],
+ "exclude": ["Angular"],
"name": "マスク入力",
- "href": "inputs/mask-input.md"
+ "href": "inputs/mask-input.md",
+ "status": "NEW"
},
{
"exclude": ["Angular"],
@@ -1796,7 +1798,7 @@
"href": "inputs/ripple.md"
},
{
- "exclude": ["Angular", "Blazor"],
+ "exclude": ["Angular"],
"name": "ツールチップ",
"href": "inputs/tooltip.md",
"status": "new"