Skip to content

Commit c0ecdf1

Browse files
stsrkistsrki
committed
Merge branch 'rel-1.8'
2 parents 21dc704 + 7c5df92 commit c0ecdf1

9 files changed

Lines changed: 154 additions & 76 deletions

File tree

‎Documentation/Blazorise.Docs.Compiler/ApiDocsGenerator/ComponentsApiDocsGenerator.cs‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,6 @@ private static string GenerateComponentsApiSource( Compilation compilation, Immu
314314
$$"""
315315
using System;
316316
using System.Collections.Generic;
317-
using System.Collections.Generic;
318317
using System.Linq.Expressions;
319318
using System.Windows.Input;
320319
using System.Threading.Tasks;

‎Documentation/Blazorise.Docs/Models/Snippets.generated.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3991,6 +3991,12 @@ private RenderFragment ToastRenderFragment( ToasterPlacement placement ) => __bu
39913991
<Button Color=""Color.Primary"">Bottom tooltip</Button>
39923992
</Tooltip>";
39933993

3994+
public const string TooltipTextTruncateExample = @"<Tooltip Text=""Lorem Ipsum is simply dummy text of the printing and typesetting industry..."" Multiline Inline>
3995+
<Text TextOverflow=""TextOverflow.Truncate"" Display=""Display.InlineBlock"" Style=""max-width: 200px; cursor: pointer;"" TextColor=""TextColor.Muted"">
3996+
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
3997+
</Text>
3998+
</Tooltip>";
3999+
39944000
public const string TooltipTriggerTargetExample = @"<Div ElementId=""tooltip-custom-target"">
39954001
Trigger target vs
39964002
<Tooltip Text=""I'm a tooltip!"" TriggerTargetId=""tooltip-custom-target"" Inline>

‎Documentation/Blazorise.Docs/Pages/Docs/Components/Tooltips/Code/TooltipTextTruncateExampleCode.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="blazorise-codeblock">
2+
<div class="html"><pre>
3+
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Tooltip</span> <span class="htmlAttributeName">Text</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Multiline</span> <span class="htmlAttributeName">Inline</span><span class="htmlTagDelimiter">&gt;</span>
4+
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Text</span> <span class="htmlAttributeName">TextOverflow</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">TextOverflow</span><span class="enumValue">.Truncate</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Display</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Display</span><span class="enumValue">.InlineBlock</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Style</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">max-width: 200px; cursor: pointer;</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TextColor</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">TextColor</span><span class="enumValue">.Muted</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
5+
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
6+
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Text</span><span class="htmlTagDelimiter">&gt;</span>
7+
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Tooltip</span><span class="htmlTagDelimiter">&gt;</span>
8+
</pre></div>
9+
</div>

‎Documentation/Blazorise.Docs/Pages/Docs/Components/Tooltips/Examples/TooltipTextTruncateExample.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@namespace Blazorise.Docs.Docs.Examples
2+
3+
<Tooltip Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry..." Multiline Inline>
4+
<Text TextOverflow="TextOverflow.Truncate" Display="Display.InlineBlock" Style="max-width: 200px; cursor: pointer;" TextColor="TextColor.Muted">
5+
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
6+
</Text>
7+
</Tooltip>

‎Documentation/Blazorise.Docs/Pages/Docs/Components/Tooltips/TooltipPage.razor‎

Lines changed: 56 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,63 @@
11
@page "/docs/components/tooltip"
22

3-
<Seo Canonical="/docs/components/tooltip" Title="Blazorise Tooltip Component" Description="Learn to use and work with the Blazorise Tooltip component, which is useful for conveying information when a user hovers over an element." />
3+
<Seo Canonical="/docs/components/tooltip" Title="Blazorise Tooltip Component" Description="Learn to use and work with the Blazorise Tooltip component, which is useful for conveying information when a user hovers, focuses, or taps on an element." />
44

55
<DocsPageTitle Path="Components/Tooltip">
66
Blazorise Tooltip component
77
</DocsPageTitle>
88

99
<DocsPageLead>
10-
Tooltips display additional information based on a specific action.
10+
Display short, contextual hints on hover, focus, or tap.
1111
</DocsPageLead>
1212

1313
<DocsPageParagraph>
14-
The <Code Tag>Tooltip</Code> component is useful for conveying information when a user hovers over an element. When activated,
15-
tooltips display a text label identifying an element, such as a description of its function.
14+
Use the <Code Tag>Tooltip</Code> component to provide extra context without taking up permanent space in the UI.
15+
Tooltips are a good fit for icons, buttons, and truncated text that needs a full-value preview.
1616
</DocsPageParagraph>
1717

18+
<DocsPageSubtitle>
19+
Overview
20+
</DocsPageSubtitle>
21+
1822
<DocsPageParagraph>
19-
<Alert Color="Color.Info" Visible>
20-
<AlertDescription>
21-
Starting with <Strong>v0.9.4</Strong>, Tooltip component is powered by <Blazorise.Link To="https://atomiks.github.io/tippyjs/" Target="Target.Blank">Tippy.js.</Blazorise.Link>
22-
</AlertDescription>
23-
</Alert>
23+
<UnorderedList>
24+
<UnorderedListItem>
25+
<Paragraph><Code>Text</Code> sets the tooltip content.</Paragraph>
26+
</UnorderedListItem>
27+
<UnorderedListItem>
28+
<Paragraph><Code>Placement</Code> controls where the tooltip appears relative to its target.</Paragraph>
29+
</UnorderedListItem>
30+
<UnorderedListItem>
31+
<Paragraph><Code>Trigger</Code> controls which events show the tooltip (hover/focus/click).</Paragraph>
32+
</UnorderedListItem>
33+
<UnorderedListItem>
34+
<Paragraph><Code>Multiline</Code> allows long tooltip text to wrap.</Paragraph>
35+
</UnorderedListItem>
36+
<UnorderedListItem>
37+
<Paragraph><Code>ShowDelay</Code> and <Code>HideDelay</Code> delay showing and hiding (in milliseconds).</Paragraph>
38+
</UnorderedListItem>
39+
<UnorderedListItem>
40+
<Paragraph><Code>Inline</Code> forces the tooltip wrapper to behave as inline-block (useful when wrapping inline content).</Paragraph>
41+
</UnorderedListItem>
42+
<UnorderedListItem>
43+
<Paragraph><Code>TriggerTargetId</Code> applies trigger event listeners to a different element than the tooltip target.</Paragraph>
44+
</UnorderedListItem>
45+
</UnorderedList>
2446
</DocsPageParagraph>
2547

48+
<Alert Color="Color.Warning" Visible>
49+
<AlertDescription>
50+
<Strong>Text truncation:</Strong> if you use <Code>TextOverflow.Truncate</Code> on the tooltip target and it renders as an inline element (e.g. <Code Tag>Text</Code>, <Code Tag>Span</Code>, or <Code Tag>span</Code>), set it to <Code>display: inline-block</Code> (or <Code>block</Code>) and apply a width (for example via <Code>max-width</Code>).
51+
</AlertDescription>
52+
</Alert>
53+
2654
<DocsPageSubtitle>
2755
Examples
2856
</DocsPageSubtitle>
2957

3058
<DocsPageSection>
3159
<DocsPageSectionHeader Title="Basic">
60+
Wrap any element with a <Code Tag>Tooltip</Code> and set its <Code>Text</Code>.
3261
</DocsPageSectionHeader>
3362
<DocsPageSectionContent Outlined FullWidth>
3463
<BasicTooltipExample />
@@ -37,8 +66,19 @@
3766
</DocsPageSection>
3867

3968
<DocsPageSection>
40-
<DocsPageSectionHeader Title="Positions">
41-
You can use one of the following modifiers to change positions of the tooltip:
69+
<DocsPageSectionHeader Title="Text truncation">
70+
Truncate the visible target text, and show the full value on hover via the tooltip.
71+
<Code>TextOverflow.Truncate</Code> requires the target element to have a width, so make it <Code>Display.InlineBlock</Code> (or apply <Code>style="display: inline-block;"</Code>).
72+
</DocsPageSectionHeader>
73+
<DocsPageSectionContent Outlined FullWidth>
74+
<TooltipTextTruncateExample />
75+
</DocsPageSectionContent>
76+
<DocsPageSectionSource Code="TooltipTextTruncateExample" />
77+
</DocsPageSection>
78+
79+
<DocsPageSection>
80+
<DocsPageSectionHeader Title="Placement">
81+
Use the <Code>Placement</Code> parameter to change where the tooltip appears:
4282
<UnorderedList>
4383
<UnorderedListItem>
4484
Top
@@ -61,8 +101,8 @@
61101
</DocsPageSection>
62102

63103
<DocsPageSection>
64-
<DocsPageSectionHeader Title="Different trigger target">
65-
You may want the tooltip to appear at a different location from its trigger (event listeners) target.
104+
<DocsPageSectionHeader Title="Separate trigger target">
105+
Use <Code>TriggerTargetId</Code> when the tooltip should be positioned relative to one element, but triggered by another.
66106
</DocsPageSectionHeader>
67107
<DocsPageSectionContent Outlined FullWidth>
68108
<TooltipTriggerTargetExample />
@@ -71,8 +111,8 @@
71111
</DocsPageSection>
72112

73113
<DocsPageSection>
74-
<DocsPageSectionHeader Title="HTML Content">
75-
Your tooltip can also contain HTML.
114+
<DocsPageSectionHeader Title="HTML content">
115+
<Code>Text</Code> can contain HTML markup. Only use this with trusted strings (or sanitize user-provided content).
76116
</DocsPageSectionHeader>
77117
<DocsPageSectionContent Outlined FullWidth>
78118
<TooltipWithHtmlExample />
@@ -82,7 +122,7 @@
82122

83123
<DocsPageSection>
84124
<DocsPageSectionHeader Title="Delay">
85-
Your Tooltip can delay hiding or showing after a trigger.
125+
Control how quickly the tooltip shows and hides after the trigger event (in milliseconds).
86126
</DocsPageSectionHeader>
87127
<DocsPageSectionContent Outlined FullWidth>
88128
<TooltipDelayExample />

0 commit comments

Comments
 (0)