ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(tooltip): fix closing div tags in tooltip stories (#662)

Browse source
This commit is contained in:
RobM-ADP 2020-03-31 03:22:01 -04:00 committed by GitHub
parent 04df0d7054
commit 8563f2699e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/tooltip/stories/index.stories.mdx
View file

@ -27,7 +27,7 @@ e invoker element is focused.
<style>${tooltipDemoStyles}</style> <style>${tooltipDemoStyles}</style>
<lion-tooltip> <lion-tooltip>
<button slot="invoker" class="demo-tooltip-invoker">Hover me</button> <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
<div slot="content" class="demo-tooltip-content">This is a tooltip<div> <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
</lion-tooltip> </lion-tooltip>
`} `}
</Story> </Story>
@ -99,7 +99,7 @@ You can easily change the placement of the content node relative to the invoker.
```html ```html
<lion-tooltip .config=${{ popperConfig: { placement: 'top' } }}> <lion-tooltip .config=${{ popperConfig: { placement: 'top' } }}>
<button slot="invoker">Top</button> <button slot="invoker">Top</button>
<div slot="content">Its top placement<div> <div slot="content">Its top placement</div>
</lion-tooltip> </lion-tooltip>
``` ```
@ -135,7 +135,7 @@ You can override the Popper configuration, the API is one to one with Popper's A
}, },
})}}> })}}>
<button slot="invoker" class="demo-tooltip-invoker">Hover me</button> <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
<div slot="content" class="demo-tooltip-content">This is a tooltip<div> <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
</lion-tooltip> </lion-tooltip>
`} `}
</Story> </Story>
@ -167,7 +167,7 @@ You can override the Popper configuration, the API is one to one with Popper's A
} }
}}> }}>
<button slot="invoker">Hover me</button> <button slot="invoker">Hover me</button>
<div slot="content">This is a tooltip<div> <div slot="content">This is a tooltip</div>
</lion-tooltip> </lion-tooltip>
``` ```
@ -191,7 +191,7 @@ We export a `lion-tooltip-arrow` that you can use by default for this.
<style>${tooltipDemoStyles}</style> <style>${tooltipDemoStyles}</style>
<lion-tooltip> <lion-tooltip>
<button slot="invoker" class="demo-tooltip-invoker">Hover me</button> <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
<div slot="content" class="demo-tooltip-content">This is a tooltip<div> <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
<lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow> <lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow>
</lion-tooltip> </lion-tooltip>
`} `}
@ -200,7 +200,7 @@ We export a `lion-tooltip-arrow` that you can use by default for this.
```html ```html
<lion-tooltip> <lion-tooltip>
<button slot="invoker">Hover me</button> <button slot="invoker">Hover me</button>
<div slot="content">This is a tooltip<div> <div slot="content">This is a tooltip</div>
<lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow> <lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow>
</lion-tooltip> </lion-tooltip>
``` ```
@ -237,7 +237,7 @@ The rest of the work is done by Popper.js (for positioning) and the `lion-toolti
<style>${tooltipDemoStyles}</style> <style>${tooltipDemoStyles}</style>
<lion-tooltip> <lion-tooltip>
<button slot="invoker" class="demo-tooltip-invoker">Hover me</button> <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
<div slot="content" class="demo-tooltip-content">This is a tooltip<div> <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
<custom-tooltip-arrow slot="arrow"></custom-tooltip-arrow> <custom-tooltip-arrow slot="arrow"></custom-tooltip-arrow>
</lion-tooltip> </lion-tooltip>
`; `;
@ -272,7 +272,7 @@ customElements.define('custom-tooltip-arrow', CustomTooltipArrow);
```html ```html
<lion-tooltip> <lion-tooltip>
<button slot="invoker">Hover me</button> <button slot="invoker">Hover me</button>
<div slot="content">This is a tooltip<div> <div slot="content">This is a tooltip</div>
<custom-tooltip-arrow slot="arrow"></custom-tooltip-arrow> <custom-tooltip-arrow slot="arrow"></custom-tooltip-arrow>
</lion-tooltip> </lion-tooltip>
``` ```