Filament•2y ago

HintIcon

Hi, is there a way to display an html format in hinticon?
Ex:

<ul>
  <li>Hello</li>
  <li>Hi</li>
  <li>How are you</li>
</ul>

<ul>
  <li>Hello</li>
  <li>Hi</li>
  <li>How are you</li>
</ul>

Screenshot_2024-06-27_at_9.15.03_PM.png

Solution

try inline

x-tooltip="{content: '<div><ul><li>Hi</li><li>Hello</li><li>World</li></ul></div>', allowHTML:true}"

x-tooltip="{content: '<div><ul><li>Hi</li><li>Hello</li><li>World</li></ul></div>', allowHTML:true}"

Jump to solution

gh057x

Ggh057x Hi, is there a way to display an html format in hinticon? Ex: ``` <ul> <li>Hel...

LeandroFerreira

L

LeandroFerreira•6/27/24, 1:21 PM

use

gh057x

G

gh057xOP•6/27/24, 1:25 PM

Thanks, that's okay but I need to hover first the icon to show the "messages"

gh057x

Ggh057x Thanks, that's okay but I need to hover first the icon to show the "messages"

LeandroFerreira

L

LeandroFerreira•6/27/24, 1:26 PM

tooltip?

gh057x

G

gh057xOP•6/27/24, 1:27 PM

Yes

gh057x

Ggh057x Yes ```->hintIcon('heroicon-m-question-mark-circle',tooltip: new HtmlString('<ul...

LeandroFerreira

L

LeandroFerreira•6/27/24, 1:41 PM

gh057x

G

gh057xOP•6/27/24, 1:54 PM

Thanks for the suggestion, I've tried it now and this is the result.

Screenshot_2024-06-27_at_9.52.52_PM.png

gh057x

G

gh057xOP•6/27/24, 1:58 PM

I've tried this too earlier but no luck
How to add custom html text or just insert HTML Entities inside hintIcon tooltip

Solution

gh057x

Ggh057x Thanks for the suggestion, I've tried it now and this is the result. ``` ->hint(...

LeandroFerreira

L

LeandroFerreira•6/27/24, 2:04 PM

try inline

x-tooltip="{content: '<div><ul><li>Hi</li><li>Hello</li><li>World</li></ul></div>', allowHTML:true}"

x-tooltip="{content: '<div><ul><li>Hi</li><li>Hello</li><li>World</li></ul></div>', allowHTML:true}"

gh057x

G

gh057xOP•6/27/24, 10:56 PM

Thanks @Leandro Ferreira

->hintIcon('heroicon-m-question-mark-circle',tooltip: new HtmlString('<ul>
                              <li>Hello</li>
                              <li>Hi</li>
                              <li>How are you</li>
                            </ul>'))

->hintIcon('heroicon-m-question-mark-circle',tooltip: new HtmlString('<ul>
                              <li>Hello</li>
                              <li>Hi</li>
                              <li>How are you</li>
                            </ul>'))

->hint(view('custom-hint'))

// blade view
<div>
    <x-filament::icon
            icon="heroicon-m-question-mark-circle"
            class="h-5 w-5"
            x-tooltip="{content: '<div>
                <ul>
                    <li>Hi</li>
                    <li>Hello</li>
                    <li>World</li>
                </ul>
                </div>', allowHTML:true}"
    />
</div>

->hint(view('custom-hint'))

// blade view
<div>
    <x-filament::icon
            icon="heroicon-m-question-mark-circle"
            class="h-5 w-5"
            x-tooltip="{content: '<div>
                <ul>
                    <li>Hi</li>
                    <li>Hello</li>
                    <li>World</li>
                </ul>
                </div>', allowHTML:true}"
    />
</div>

<!-- custom-hint.blade.php -->
<div>
    <x-filament::icon
        icon="heroicon-m-question-mark-circle"
        class="h-5 w-5"
        x-tooltip="{content: '<div>your html...</div>', allowHTML:true}"
    />
</div>

<!-- custom-hint.blade.php -->
<div>
    <x-filament::icon
        icon="heroicon-m-question-mark-circle"
        class="h-5 w-5"
        x-tooltip="{content: '<div>your html...</div>', allowHTML:true}"
    />
</div>