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>

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

9 Replies

LeandroFerreira•5mo ago

use hint(new HtmlString('<ul>...</ul>'))

lazydogOP•5mo ago

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

LeandroFerreira•5mo ago

tooltip?

lazydogOP•5mo ago

Yes

->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>'))

LeandroFerreira•5mo ago

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

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

<!-- 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>

lazydogOP•5mo ago

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

->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>

lazydogOP•5mo ago

I've tried this too earlier but no luck https://discord.com/channels/883083792112300104/1254048971387568201/1254048971387568201

Solution

LeandroFerreira•5mo ago

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}"

lazydogOP•5mo ago

Thanks @Leandro Ferreira

Gaming

Programming

HintIcon