tooltip positioning
This commit is contained in:
saml33
parent
82ea8e6e56
commit
faf78be5df
|
|
@ -98,22 +98,28 @@ const TokenList = () => {
|
|||
<thead>
|
||||
<tr>
|
||||
<th className="text-left">{t('token')}</th>
|
||||
<th className="text-right">
|
||||
<Tooltip content="If your balance is negative, you have a borrow for that token, of that amount.">
|
||||
<span className="tooltip-underline">{t('balance')}</span>
|
||||
</Tooltip>
|
||||
<th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content="If your balance is negative, you have a borrow for that token, of that amount.">
|
||||
<span className="tooltip-underline">{t('balance')}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-right">
|
||||
<Tooltip content="The sum of interest earned and interest paid for each token.">
|
||||
<span className="tooltip-underline">
|
||||
{t('interest-earned-paid')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
<th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content="The sum of interest earned and interest paid for each token.">
|
||||
<span className="tooltip-underline">
|
||||
{t('interest-earned-paid')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-right">
|
||||
<Tooltip content="The interest rates (per year) for depositing (green/left) and borrowing (red/right)">
|
||||
<span className="tooltip-underline">{t('rates')}</span>
|
||||
</Tooltip>
|
||||
<th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content="The interest rates (per year) for depositing (green/left) and borrowing (red/right)">
|
||||
<span className="tooltip-underline">{t('rates')}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-right">{t('price')}</th>
|
||||
<th className="hidden text-right lg:block"></th>
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ const AccountPage = () => {
|
|||
<div id="step-two">
|
||||
<Tooltip
|
||||
maxWidth="20rem"
|
||||
placement="bottom"
|
||||
placement="bottom-start"
|
||||
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>
|
||||
|
|
@ -233,7 +233,7 @@ const AccountPage = () => {
|
|||
<div id="step-three">
|
||||
<Tooltip
|
||||
maxWidth="20rem"
|
||||
placement="bottom"
|
||||
placement="bottom-start"
|
||||
content={
|
||||
<div className="flex-col space-y-2 text-sm">
|
||||
<p className="text-xs">
|
||||
|
|
@ -277,7 +277,7 @@ const AccountPage = () => {
|
|||
<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."
|
||||
maxWidth="20rem"
|
||||
placement="bottom"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<p className="tooltip-underline text-th-fgd-3">
|
||||
{t('free-collateral')}
|
||||
|
|
@ -299,7 +299,7 @@ const AccountPage = () => {
|
|||
<div>
|
||||
<Tooltip
|
||||
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>
|
||||
</Tooltip>
|
||||
|
|
@ -321,7 +321,7 @@ const AccountPage = () => {
|
|||
<Tooltip
|
||||
content="The value of interest earned (deposits) minus interest paid (borrows)."
|
||||
maxWidth="20rem"
|
||||
placement="bottom"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<p className="tooltip-underline text-th-fgd-3">
|
||||
{t('total-interest-value')}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const Tooltip = ({
|
|||
appendTo={() => document.body}
|
||||
maxWidth={maxWidth}
|
||||
interactive
|
||||
inlinePositioning
|
||||
delay={delay}
|
||||
content={
|
||||
content ? (
|
||||
|
|
|
|||
|
|
@ -93,20 +93,30 @@ const TokenList = () => {
|
|||
<th className="text-right">{t('price')}</th>
|
||||
<th className="text-right">{t('total-deposits')}</th>
|
||||
<th className="text-right">{t('total-borrows')}</th>
|
||||
<th className="text-right">
|
||||
<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.">
|
||||
<span className="tooltip-underline">{t('rates')}</span>
|
||||
</Tooltip>
|
||||
<th>
|
||||
<div className="flex justify-end">
|
||||
<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.">
|
||||
<span className="tooltip-underline">{t('rates')}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-right">
|
||||
<Tooltip content="The percentage of deposits that have been lent out.">
|
||||
<span className="tooltip-underline">{t('utilization')}</span>
|
||||
</Tooltip>
|
||||
<th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content="The percentage of deposits that have been lent out.">
|
||||
<span className="tooltip-underline">
|
||||
{t('utilization')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-right">
|
||||
<Tooltip content={t('asset-weight-desc')}>
|
||||
<span className="tooltip-underline">{t('asset-weight')}</span>
|
||||
</Tooltip>
|
||||
<th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('asset-weight-desc')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('asset-weight')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div className="flex items-center justify-end">
|
||||
|
|
|
|||
Loading…
Reference in New Issue