Tooltip over steps content

[J4gQBqqR]

Is there a way to show a tooltip upon hover over a steps content?

<ul
	class="steps steps-vertical md:fixed md:inline-grid hidden min-w-min h-[calc(100vh-4rem)]"
>
	<li data-content="" class="step step-primary justify-center items-center">
		<div class="tooltip tooltip-right" data-tip="hello">
			<Icon
				class="z-2 text-black col-start-1 row-start-1 place-items-center place-self-center"
				icon="fluent:people-community-24-regular"
			/>
		</div>
	</li>
	<li data-content="" class="step step-primary">
		<Icon
			class="z-2 text-black col-start-1 row-start-1 place-items-center place-self-center"
			icon="mingcute:pig-money-line"
		/>
	</li>
</ul>

[saadeghi]

You can... but I wouldn't suggest that.
Both step and tooltip are using the same CSS pseudo elements to show their visual elements (the circle, the line, the tooltip box and the tooltip triangle) so we can't use step and tooltip class names on the same element.
We put tooltip inside step like this: https://play.tailwindcss.com/JYx2tgKmC3

<ul class="steps my-4 w-full">
  <li class="step">
    <div class="tooltip before:z-[2]" data-tip="tooltip 1">
      <div>Text 1</div>
    </div>
  </li>
  <li class="step">
    <div class="tooltip before:z-[2]" data-tip="tooltip 2">
      <div>Text 2</div>
    </div>
  </li>
</ul>

But this way, it will show the tooltip only when the text is hovered (not the step itself or the circle)

I would suggest not using the tooltip here.
If you really have to use it, you can recreate the steps layout using Tailwind CSS class names instead of using daisyUI's steps class name.

Let me know if you have any questions.