Skip to content

Commit 389cf3f

Browse files
jquensejquense
committed
[changed] Deprecate OverlayTrigger positioning api and "manual" trigger
Positioning logic abstracted out and deprecated.
1 parent 5eb8666 commit 389cf3f

File tree

5 files changed

+238
-311
lines changed

5 files changed

+238
-311
lines changed

‎docs/examples/OverlayTrigger.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
const Example = React.createClass({
3+
render(){
4+
const style = {
5+
position: 'absolute',
6+
backgroundColor: '#EEE',
7+
border: '1px solid #CCC',
8+
borderRadius: 3,
9+
marginLeft: 5,
10+
padding: 10
11+
};
12+
13+
const overlay = (
14+
<div style={style}>
15+
<strong>Holy guacamole!</strong> Check this info.
16+
</div>
17+
);
18+
19+
return (
20+
<div style={{ height: 100, position: 'relative' }}>
21+
<OverlayTrigger
22+
defaultOverlayShown={true}
23+
placement="right"
24+
trigger='click'
25+
overlay={overlay}
26+
container={this}
27+
>
28+
<Button>I am an Overlay target (click me)</Button>
29+
</OverlayTrigger>
30+
</div>
31+
);
32+
}
33+
});
34+
35+
React.render(<Example/>, mountNode);

‎docs/src/ComponentsPage.js

+59-28
Original file line numberDiff line numberDiff line change
@@ -306,49 +306,79 @@ const ComponentsPage = React.createClass({
306306

307307
</div>
308308

309-
{/* Tooltip */}
309+
{/* overlays */}
310310
<div className='bs-docs-section'>
311-
<h1 id='tooltips' className='page-header'>Tooltips <small>Tooltip</small></h1>
312-
<h2 id='tooltips-examples'>Example tooltips</h2>
311+
<h1 id='overlays' className='page-header'>Overlays <small>Overlay, Tooltip, Popover</small></h1>
313312

314-
<p>Tooltip component.</p>
315-
<ReactPlayground codeText={Samples.TooltipBasic} />
313+
<h2 id='overlays-examples'>Overlay</h2>
314+
<p>
315+
Overlays allow components to be rendered and positioned to the left, right, top, or bottom of another component.
316+
They are perfect for simple tooltips or even more complicated popups.
317+
</p>
318+
<ReactPlayground codeText={Samples.Overlay} />
316319

317-
<p>Positioned tooltip component.</p>
318-
<ReactPlayground codeText={Samples.TooltipPositioned} />
320+
<h2 id='overlays-examples'>Overlay Trigger</h2>
321+
<p>
322+
Often you will want to show or hide and Overlay in response to an action by its target, such as hovering over a link.
323+
Since this is such a common pattern we provide the <code>OverlayTrigger</code> component to reduce the amount of boilerplate
324+
you need to write to implement this pattern.
325+
</p>
326+
<ReactPlayground codeText={Samples.OverlayTrigger} />
319327

320-
<p>Positioned tooltip in copy.</p>
321-
<ReactPlayground codeText={Samples.TooltipInCopy} />
328+
<h3 id='overlays-props'>Props</h3>
322329

323-
<h3 id='tooltip-props'>Props</h3>
330+
<h4>Overlay</h4>
331+
<PropTable component='Overlay'/>
324332

325-
<PropTable component='Tooltip'/>
333+
<h4>OverlayTrigger</h4>
334+
<PropTable component='OverlayTrigger'/>
326335

327-
</div>
336+
{/* Tooltip */}
337+
<div className='bs-docs-section'>
338+
<h2 id='tooltips' >Tooltip</h2>
339+
<p>
340+
You don't always need to create custom styling for your overlays. Bootstrap provides two great options out of the box.
341+
Tooltips can be used inside an <code>Overlay</code> Component, or an <code>OverlayTrigger</code>
342+
</p>
343+
<ReactPlayground codeText={Samples.TooltipBasic} exampleClassName='tooltip-static'/>
328344

329-
{/* Popover */}
330-
<div className='bs-docs-section'>
331-
<h1 id='popovers' className='page-header'>Popovers <small>Popover</small></h1>
332-
<h2 id='popovers-examples'>Example popovers</h2>
345+
<p>Positioned tooltip component.</p>
346+
<ReactPlayground codeText={Samples.TooltipPositioned} />
333347

334-
<p>Popover component.</p>
335-
<ReactPlayground codeText={Samples.PopoverBasic} />
348+
<p>Positioned tooltip in copy.</p>
349+
<ReactPlayground codeText={Samples.TooltipInCopy} />
336350

337-
<p>Positioned popover component.</p>
338-
<ReactPlayground codeText={Samples.PopoverPositioned} />
351+
<h3 id='tooltips-props'>Props</h3>
352+
<PropTable component='Tooltip'/>
339353

340-
<p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
341-
<ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
354+
</div>
355+
356+
{/* Popover */}
357+
<div className='bs-docs-section'>
358+
<h2 id='popovers'>Popovers</h2>
359+
360+
<p>
361+
The Popover component, like the Tooltip can be used with an <code>Overlay</code> Component, or an <code>OverlayTrigger</code>.
362+
Unlike the Tooltip popovers are designed to display more reobust information about their targets.
363+
</p>
364+
<ReactPlayground codeText={Samples.PopoverBasic}/>
342365

343-
<p>Popover component in container.</p>
344-
<ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
366+
<p>Positioned popover component.</p>
367+
<ReactPlayground codeText={Samples.PopoverPositioned} />
345368

346-
<p>Positioned popover components in scrolling container.</p>
347-
<ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
369+
<p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
370+
<ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
348371

349-
<h3 id='popover-props'>Props</h3>
372+
<p>Popover component in container.</p>
373+
<ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
350374

351-
<PropTable component='Popover'/>
375+
<p>Positioned popover components in scrolling container.</p>
376+
<ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
377+
378+
<h3 id='popover-props'>Props</h3>
379+
380+
<PropTable component='Popover'/>
381+
</div>
352382
</div>
353383

354384
{/* Progress Bar */}
@@ -833,6 +863,7 @@ const ComponentsPage = React.createClass({
833863
</SubNav>
834864
<NavItem href='#panels' key={4}>Panels</NavItem>
835865
<NavItem href='#modals' key={5}>Modals</NavItem>
866+
<NavItem href='#overlays' key={27}>Overlays</NavItem>
836867
<NavItem href='#tooltips' key={6}>Tooltips</NavItem>
837868
<NavItem href='#popovers' key={7}>Popovers</NavItem>
838869
<NavItem href='#progress' key={8}>Progress bars</NavItem>

0 commit comments

Comments
 (0)