Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master'
Browse files Browse the repository at this point in the history
# Conflicts:
#	src/index.js
  • Loading branch information
an4ger committed Sep 3, 2018
2 parents ab9c109 + ce365fe commit 6add4b6
Show file tree
Hide file tree
Showing 11 changed files with 2,826 additions and 2,669 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ className | data-class | String | | extra custom class, can use !importan
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target
insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
border | data-border | Bool | true, false | Add one pixel white border
getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically
Expand Down
61 changes: 61 additions & 0 deletions example/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,67 @@ class Test extends React.Component {
</div>
</pre>
</div>
<div className="section">
<h4 className='title'>Demonstrate using mouse in tooltip. </h4>
<p>Notice that the tooltip delays going away so you can get your mouse in it. You must set delayUpdate and delayHide for the tooltip to stay long enough to get your mouse over it.</p>
<p className="sub-title"></p>
<div className="example-jsx">
<div className="block" >
<a data-for='soclose' data-tip='1'>1 (❂‿❂)</a>
</div>
<div className="block">
<a data-for='soclose' data-tip='2'>2 (❂‿❂)</a>
</div>
<div className="block" >
<a data-for='soclose' data-tip='3'>3(❂‿❂)</a>
</div>
<div className="block">
<a data-for='soclose' data-tip='4'>4(❂‿❂)</a>
</div>
<div className="block" >
<a data-for='soclose' data-tip='5'>5(❂‿❂)</a>
</div>
<div className="block">
<a data-for='soclose' data-tip='6'>6(❂‿❂)</a>
</div>
<div className="block" >
<a data-for='soclose' data-tip='7'>7(❂‿❂)</a>
</div>
<div className="block">
<a data-for='soclose' data-tip='8'>8(❂‿❂)</a>
</div>

<ReactTooltip id='soclose'
getContent={(dataTip) => <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }
effect='solid'
delayHide={500}
delayShow={500}
delayUpdate={500}
place={'right'}
border={true}
type={'light'}

/>
</div>
<br />
<pre className='example-pre'>
<div>
<p>{"<a data-for='soclose' data-tip='sooooo cute'>(❂‿❂)</a>"}<p/>{"<a data-for='soclose' data-tip='2'>(❂‿❂)</a>..."}<p/>{
"<a data-for='soclose' data-tip='really high'>(❂‿❂)</a>\n" +
"<ReactTooltip id='soclose'\n" +
" getContent={(dataTip) => \n"}{
" <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }\n" +
" effect='solid'\n" +
" delayHide={500}\n" +
" delayShow={500}\n" +
" delayUpdate={500}\n" +
" place={'right'}\n" +
" border={true}\n" +
" type={'light'}"}</p>
</div>
</pre>
</div>

</section>
</div>
)
Expand Down
12 changes: 12 additions & 0 deletions example/src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,18 @@ html, body{
height: 0;
visibility: hidden;
}
.block {
float: left;
$width: 55px;

a {
text-align: center;
width: $width;
height: $width;
border: 1px solid #999;
border-radius: 0px
}
}
.side {
width: 50%;
float: left;
Expand Down
Loading

0 comments on commit 6add4b6

Please sign in to comment.