Skip to content
Snippets Groups Projects
Commit 4232d569 authored by Manoa Harinjo's avatar Manoa Harinjo
Browse files

add tooltip

parent 17d8e744
No related branches found
No related tags found
No related merge requests found
......@@ -18,6 +18,7 @@ const Text = (props: IText) => {
const { title, content, className = "", action } = props
const options = props.options ?? {}
const oClass = options.class || {}
const oTooltip = options.tooltip || {}
return (
<div className={twMerge(oClass.main, className)}>
......@@ -28,17 +29,65 @@ const Text = (props: IText) => {
oClass.title
)}
>
{title}
{title}{" "}
{oTooltip.title ? (
<div
className="tooltip tooltip-base-100 "
data-tip={oTooltip.title}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="text-secondary h-5 w-5 cursor-pointer"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
/>
</svg>
</div>
) : (
<></>
)}
</h2>
)}
{content && (
<div
className={twMerge(
"pt-10 text-justify text-xl leading-8",
oClass.content
<>
<span
className={twMerge(
"pt-10 text-justify text-xl leading-8 ",
oClass.content
)}
dangerouslySetInnerHTML={{ __html: content }}
/>
{oTooltip.content ? (
<span
className="tooltip tooltip-base-100 tooltip-color:tooltip-base-100!"
data-tip={oTooltip.content}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="text-secondary h-5 w-5 cursor-pointer"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
/>
</svg>
</span>
) : (
<></>
)}
dangerouslySetInnerHTML={{ __html: content }}
></div>
</>
)}
{action && action.name !== "" ? (
<Button
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment