blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tooltip positioning

This commit is contained in:
saml33 2022-09-26 10:37:04 +10:00
parent 82ea8e6e56
commit faf78be5df
4 changed files with 48 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/TokenList.tsx
View File

@ -98,22 +98,28 @@ const TokenList = () => {
<thead> <thead>
<tr> <tr>
<th className="text-left">{t('token')}</th> <th className="text-left">{t('token')}</th>
<th className="text-right"> <th>
<Tooltip content="If your balance is negative, you have a borrow for that token, of that amount."> <div className="flex justify-end">
<span className="tooltip-underline">{t('balance')}</span> <Tooltip content="If your balance is negative, you have a borrow for that token, of that amount.">
</Tooltip> <span className="tooltip-underline">{t('balance')}</span>
</Tooltip>
</div>
</th> </th>
<th className="text-right"> <th>
<Tooltip content="The sum of interest earned and interest paid for each token."> <div className="flex justify-end">
<span className="tooltip-underline"> <Tooltip content="The sum of interest earned and interest paid for each token.">
{t('interest-earned-paid')} <span className="tooltip-underline">
</span> {t('interest-earned-paid')}
</Tooltip> </span>
</Tooltip>
</div>
</th> </th>
<th className="text-right"> <th>
<Tooltip content="The interest rates (per year) for depositing (green/left) and borrowing (red/right)"> <div className="flex justify-end">
<span className="tooltip-underline">{t('rates')}</span> <Tooltip content="The interest rates (per year) for depositing (green/left) and borrowing (red/right)">
</Tooltip> <span className="tooltip-underline">{t('rates')}</span>
</Tooltip>
</div>
</th> </th>
<th className="text-right">{t('price')}</th> <th className="text-right">{t('price')}</th>
<th className="hidden text-right lg:block"></th> <th className="hidden text-right lg:block"></th>

10
components/account/AccountPage.tsx
View File

@ -141,7 +141,7 @@ const AccountPage = () => {
<div id="step-two"> <div id="step-two">
<Tooltip <Tooltip
maxWidth="20rem" maxWidth="20rem"
placement="bottom" placement="bottom-start"
content="The value of your assets (deposits) minus the value of your liabilities (borrows)." content="The value of your assets (deposits) minus the value of your liabilities (borrows)."
> >
<p className="tooltip-underline mb-1.5">{t('account-value')}</p> <p className="tooltip-underline mb-1.5">{t('account-value')}</p>
@ -233,7 +233,7 @@ const AccountPage = () => {
<div id="step-three"> <div id="step-three">
<Tooltip <Tooltip
maxWidth="20rem" maxWidth="20rem"
placement="bottom" placement="bottom-start"
content={ content={
<div className="flex-col space-y-2 text-sm"> <div className="flex-col space-y-2 text-sm">
<p className="text-xs"> <p className="text-xs">
@ -277,7 +277,7 @@ const AccountPage = () => {
<Tooltip <Tooltip
content="The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals." content="The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals."
maxWidth="20rem" maxWidth="20rem"
placement="bottom" placement="bottom-start"
> >
<p className="tooltip-underline text-th-fgd-3"> <p className="tooltip-underline text-th-fgd-3">
{t('free-collateral')} {t('free-collateral')}
@ -299,7 +299,7 @@ const AccountPage = () => {
<div> <div>
<Tooltip <Tooltip
content="The amount your account has made or lost." content="The amount your account has made or lost."
placement="bottom" placement="bottom-start"
> >
<p className="tooltip-underline text-th-fgd-3">{t('pnl')}</p> <p className="tooltip-underline text-th-fgd-3">{t('pnl')}</p>
</Tooltip> </Tooltip>
@ -321,7 +321,7 @@ const AccountPage = () => {
<Tooltip <Tooltip
content="The value of interest earned (deposits) minus interest paid (borrows)." content="The value of interest earned (deposits) minus interest paid (borrows)."
maxWidth="20rem" maxWidth="20rem"
placement="bottom" placement="bottom-end"
> >
<p className="tooltip-underline text-th-fgd-3"> <p className="tooltip-underline text-th-fgd-3">
{t('total-interest-value')} {t('total-interest-value')}

1
components/shared/Tooltip.tsx
View File

@ -29,6 +29,7 @@ const Tooltip = ({
appendTo={() => document.body} appendTo={() => document.body}
maxWidth={maxWidth} maxWidth={maxWidth}
interactive interactive
inlinePositioning
delay={delay} delay={delay}
content={ content={
content ? ( content ? (

34
components/stats/TokenStats.tsx
View File

@ -93,20 +93,30 @@ const TokenList = () => {
<th className="text-right">{t('price')}</th> <th className="text-right">{t('price')}</th>
<th className="text-right">{t('total-deposits')}</th> <th className="text-right">{t('total-deposits')}</th>
<th className="text-right">{t('total-borrows')}</th> <th className="text-right">{t('total-borrows')}</th>
<th className="text-right"> <th>
<Tooltip content="The deposit rate (green) will automatically be paid on positive balances and the borrow rate (red) will automatically be charged on negative balances."> <div className="flex justify-end">
<span className="tooltip-underline">{t('rates')}</span> <Tooltip content="The deposit rate (green) will automatically be paid on positive balances and the borrow rate (red) will automatically be charged on negative balances.">
</Tooltip> <span className="tooltip-underline">{t('rates')}</span>
</Tooltip>
</div>
</th> </th>
<th className="text-right"> <th>
<Tooltip content="The percentage of deposits that have been lent out."> <div className="flex justify-end">
<span className="tooltip-underline">{t('utilization')}</span> <Tooltip content="The percentage of deposits that have been lent out.">
</Tooltip> <span className="tooltip-underline">
{t('utilization')}
</span>
</Tooltip>
</div>
</th> </th>
<th className="text-right"> <th>
<Tooltip content={t('asset-weight-desc')}> <div className="flex justify-end">
<span className="tooltip-underline">{t('asset-weight')}</span> <Tooltip content={t('asset-weight-desc')}>
</Tooltip> <span className="tooltip-underline">
{t('asset-weight')}
</span>
</Tooltip>
</div>
</th> </th>
<th> <th>
<div className="flex items-center justify-end"> <div className="flex items-center justify-end">