Tooltip
This is a guideline for you on how to create you first product in your store
size XS (extra small)
Security
size S (small)
Security
size M (Medium)
Security
size L (large)
Security
size XL (extra large)
Security
React js
import * as React from 'react';
import Tooltip from 'vestarplus/Tooltip';
import Buttons from '../Buttons/Buttons';
export default function BasicTooltipfunction() {
return (
//different sizes for different tooltip buttons xs, s, m, l, xl
//you can add a custom link inside the tooltip using the a tag or just just plan text
<Tooltip text={ <span> This is a guideline for you on how to create your first{' '}
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer" >product</a>{' '} in your store! </span> }
size="xs"
head="Security" >
<Buttons type="primary" size="small">
<span style={{ color: 'white' }}>Hover Me</span>
</Buttons>
</Tooltip>
<Tooltip text='This is a guideline for you on how to create your first product'
size="xs"
head="Security" >
<Buttons type="primary" size="small">
<span style={{ color: 'white' }}>Hover Me</span>
</Buttons>
</Tooltip>
);
}
HTMLCSSJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="tooltipContainer" class="tooltip-container tooltip-container-m">
<button id="tooltipTrigger">Hover me</button>
<div id="tooltip" class="tooltip tooltip-m">
<div id="headHolder" class="head-holder">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 17 18" fill="none"
class="wallInfo">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.75586 9.0999C1.75586 5.33056 4.81151 2.2749 8.58085 2.2749C12.3502 2.2749 15.4058 5.33056 15.4058 9.0999C15.4058 12.8692 12.3502 15.9249 8.58085 15.9249C4.81151 15.9249 1.75586 12.8692 1.75586 9.0999ZM7.85022 8.09081C8.65259 7.68963 9.55602 8.41434 9.33845 9.28462L8.84214 11.2699L8.87118 11.2553C9.13052 11.1257 9.44587 11.2308 9.57554 11.4901C9.70521 11.7495 9.60009 12.0648 9.34076 12.1945L9.31171 12.209C8.50935 12.6102 7.60592 11.8855 7.82349 11.0152L8.3198 9.02996L8.29076 9.04448C8.03142 9.17415 7.71606 9.06903 7.5864 8.80969C7.45673 8.55036 7.56184 8.235 7.82118 8.10533L7.85022 8.09081ZM8.58085 6.9999C8.8708 6.9999 9.10585 6.76485 9.10585 6.4749C9.10585 6.18495 8.8708 5.9499 8.58085 5.9499C8.2909 5.9499 8.05585 6.18495 8.05585 6.4749C8.05585 6.76485 8.2909 6.9999 8.58085 6.9999Z"
fill="#3693F7" />
</svg>
</div>
<div id="headTitle" class="headtitle">Head Title</div>
</div>
<span id="tooltipText">Tooltip Text</span>
</div>
</div>
</body>
</html>