Tooltips can be utilized with many existing components by passing the tip
attribute. This automatically adds the tooltip CSS class and sets the
data-tip attribute to the text you provide.
Additionally, we offer the daisy_tooltip component to wrap an entire
component, or any block of HTML, in a tooltip. This is also aliased as
daisy_tip for convenience.
tip - The text to display in the tooltip. Can either be a keyword
argument or the first positional argument.Tooltips can be added to many components by setting the tip attribute or
by adding the tooltip class and setting the data-tip attribute to the
text you want to display.
.flex.flex-col.gap-12
.flex.items-center.justify-center.gap-8
- # Just pass the `tip` argument to any component that supports it!
= daisy_button(title: "Hover Me", css: "btn-primary", tip: "This is a tooltip!")
= daisy_badge(title: "Hover Me", css: "badge-secondary", tip: "This is a badge tooltip!")
- # You can also use the `tooltip` class / `data-tip` attribute directly
= daisy_alert(css: "tooltip tooltip-bottom tooltip-success", html: { data: { tip: "This is an alert tooltip!" }}) do
Here is an alert with a bottom tooltip!
= daisy_chat do |chat|
- chat.with_avatar(css: "tooltip-left tooltip-info", tip: "This is a left avatar tooltip!", src: image_path("avatars/lady-smiling-3.jpg"))
- chat.with_bubble do
- # Note that we can't add it directly to the bubble because it won't
- # render properly. So we render it on the text instead and add some
- # margin to make sure it's not inside of the bubble.
.tooltip.tooltip-right.tooltip-primary.before:ml-4.after:ml-4{ data: { tip: "This is a right chat bubble tooltip!" } }
Here is some text that also has a tooltip!
Sometimes, you may need to wrap the entire component in a tooltip.
For this, we offer the very basic daisy_tooltip (or daisy_tip)
component which has a tip argument to simplify your code a bit.
.flex.flex-col.gap-8
- # Manual-style HAML tootlip
.tooltip{ data: { tip: "This is a progress tooltip!" } }
= daisy_progress(value: 42, css: "w-56")
- # Standard helper method
= daisy_tooltip("This is a radial tooltip!") do
= daisy_radial(value: 58) do
58%
- # Aliased helper method
= daisy_tip(css: "tooltip-bottom tooltip-info", tip: "We're loading a skeleton tooltip!") do
= daisy_skeleton(css: "w-56 h-24")