<div className="ti-btn-list">
{tooltipdirection.map((idx) =>(
    <div className={a&#768;hs-tooltip ti-main-tooltip &#36;{idx.class}a&#769;} key={Math.random()}>
    <button type="button" className="hs-tooltip-toggle ti-btn ti-btn-primary-full">
    {idx.text}
    <span className="hs-tooltip-content  ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm " role="tooltip">{idx.text}</span>
    </button>
    </div>))}
    </div>

 <div className="ti-btn-list">
{colortooltip.map((idx)=>(
    <div className={a&#768;hs-tooltip ti-main-tooltip &#36;{idx.class}a&#769;} key={Math.random()}>
    <button type="button" className={a&#768;hs-tooltip-toggle ti-btn ti-btn-&#36;{idx.color}a&#769;}>
    {idx.text}
    <span className={a&#768;hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-&#36;{idx.class1} !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700a&#769;} role="tooltip"> {idx.text}</span>
    </button>
    </div>))}
    </div>

<div className="hs-tooltip ti-main-tooltip [--placement:top]">
<p className="text-muted mb-0"> Hover on the link to view the <Link aria-label="anchor" href="#" title="Link Tooltip"></Link>
<span className="hs-tooltip-toggle !text-primary"> Tooltip<span  className="hs-tooltip-content ti-main-tooltip-content !py-1 !px-1 !bg-primary !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700" role="tooltip"> Link Tooltip</span>
</span></p>
</div>

<div className="hs-tooltip ti-main-tooltip [--placement:top]">
<button type="button" className="hs-tooltip-toggle me-4">
<svg xmlns="http://www.w3.org/2000/svg" className="fill-primary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z" /></svg>
<span className="hs-tooltip-content ti-main-tooltip-content !py-1 !px-2 !bg-primary !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700" role="tooltip"> Home</span>
</button>
</div>

<div className="hs-tooltip ti-main-tooltip">
<button type="button" className="hs-tooltip-toggle ti-btn ti-btn-primary-full opacity-[0.6]"> Disabled button<span className="hs-tooltip-content  ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm " role="tooltip">  Disabled Tooltip</span>
</button>
</div>

<div className="hs-tooltip ti-main-tooltip">
<button type="button" className="hs-tooltip-toggle avatar avatar-md me-2 online avatar-rounded">
<img src="../../../assets/images/faces/12.jpg" alt="img" /></button>
<span className="hs-tooltip-content  ti-main-tooltip-content !py-1 !px-2 !bg-primary !text-xs !font-medium !text-white shadow-sm " role="tooltip"> Alex Carey</span>
</div>