Laravel blade tooltip svg component

Laravel blade tooltip svg component

Realm Coding

7 min read

In our previous mini-post about blade components, I shared a very cool little SVG component to keep handy in your developer's tool belt. In this follow-up mini-post, we will dive deeper into the specific component and experiment with a way to use the simple SVG component as a part of a larger component.

Previous Post ๐Ÿ”—

In the previous Sudorealm mini-post I crafted this little beauty using the tabler-icons SVG library:

<x-svg svg="brand-facebook" />

What we want to achieve is to have a component that uses this small SVG blade component and also pop up a tooltip when you hover over the SVG.

Code by wishful thinking

While watching the course Test Driven Laravel by @adamwathan I learned a new way of thinking about code. โ€œLet's code by wishful thinkingโ€, he said, and I loved it. The idea is, that you first write the code that you would like to end up with, and then make it happen. So let's follow this approach for this component.

I want to end up with something like this:

<x-svg-tooltip svg="package" message="products to storages" color='green'/>

Step 1st: Create the blade component

We create a new file under the resources/components folder and name it svg-tooltip.blade.php.

Step 2nd: Add the props We need to check what props we are having in our component. By taking a look at our wishful thinking we see three props

  • svg
  • message
  • color

That's easy, let's create our @props array inside our new svg-tooltip blade file.

@props([
    'svg' => '',
    'message' => '',
    'color' => 'gray'
])

Done โœ…

Step 3d: Add the component body

<div class="relative inline-block">
	<x-svg {{ $attributes }} :svg="$svg"
        class="relative text-{{ $color }}-500 transition cursor-pointer peer hover:text-{{ $color }}-700" />
    <div
        class="absolute shadow right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded bg-{{ $color }}-100 py-[6px] px-4 text-sm font-semibold text-{{ $color }}-700 opacity-0 peer-hover:opacity-100">
        <span
            class="absolute right-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm bg-{{ $color }}-100">		   
        </span>
        {{ $message }}
    </div>
</div>

I want to take a step back and explain some core pieces of this code.

As you see You can specify the message that you want to display when you hover over the tooltip by filling in the message prop! Also, you can decide what color your SVG will be, there is one additional small configuration that I will provide you with at the end of this mini-post.

The main little detail you might have noticed is the :svg="$svg" prop. If you remember, in the SVG component from before we just passed the SVG name from the tabler-icons directly like, svg="some-component-name", but now we are using the colon symbol before the svg prop (:svg).

In Laravel Blade templates, the colon symbol is used to introduce a PHP expression or variable. In the context of a component, the colon is typically used before a prop declaration to indicate that the prop is a PHP variable.

If you think about it, in the previous component we did this:

<!-- Component declaration --> 
<x-component prop="svg-name" />

<!-- Component body --> 
<svg title="{{$prop}}"> </svg>

But now with this tooltip component, we are a level deeper and we want to pass the {{$prop}} variable to the nested svg component.

<!-- Component declaration --> 
<x-component prop="svg-name" />

<!-- Tooltip Component body --> 
<x-svg :prop="$prop" /> <!-- That's the trick -->

<!-- SVG Component body --> 
<svg title="{{$prop}}"> </svg>

And this is a small preview of how we pass PHP variables to a blade component as well as a hint on how you can nest one blade component within another.

Component Code Snippet

<!--
* ------------------------------------------------------------------------   
* For this component to work with dynamic coloring
* we have to pre fetch all the tailwind colors we need for JIT to know
* ------------------------------------------------------------------------
* WHY?
* ------------------------------------------------------------------------
* If we don't, then the JIT will not have compiled the classes that we want 
* to be using dynamically with this component
* ------------------------------------------------------------------------
-->

@props([
    'svg' => '',
    'message' => '',
    'color' => 'gray'
])


<div class="relative inline-block">
    <x-svg {{ $attributes }} :svg="$svg"
        class="relative text-{{ $color }}-500 transition cursor-pointer peer hover:text-{{ $color }}-700" />
    <div
        class="absolute shadow right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded bg-{{ $color }}-100 py-[6px] px-4 text-sm font-semibold text-{{ $color }}-700 opacity-0 peer-hover:opacity-100">
        <span
            class="absolute right-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm bg-{{ $color }}-100"></span>
        {{ $message }}
    </div>

</div>

JIT Configuration

Safelisting is used in situations where itโ€™s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature. But here we do ๐Ÿค“

Since tailwind scans our code for classes when it finally gets to scan out component it will see text-{{ $color }}-500. This class is not comprehendible to tailwind. Consequently, we will be left out with a component without color unless we used a color whose class was used somewhere else in the application. Just sharing some knowledge hereโ€ฆ

safelist: [
        'bg-gradient-to-r',
        {
            pattern: /bg-(red|green|blue|indigo|yellow|purple|emerald|lime)-(100|200|300|400|500|600|700|800|900)/,
            variants:['hover', 'focus'],
        },
        {
            pattern: /text-(red|green|blue|indigo|yellow|purple|emerald|lime)-(100|200|300|400|500|600|700|800|900)/,
        },
        {
            pattern: /border-(red|green|blue|indigo|yellow|purple|emerald|lime)-(100|200|300|400|500|600|700|800|900)/,
        },
        {
            pattern: /from-(red|green|blue|indigo|yellow|purple|emerald|lime)-(100|200|300|400|500|600|700|800|900)/,
        },
        {
            pattern: /via-(red|green|blue|indigo|yellow|purple|emerald|lime)-(100|200|300|400|500|600|700|800|900)/,
        },
        {
            pattern: /to-(red|green|blue|indigo|yellow|purple|emerald|lime)-(100|200|300|400|500|600|700|800|900)/,
        },
        {
            pattern: /overflow-(auto)/,
        },
      ],

This safelist is a bit too much, but you can draw whatever you want from it for your own application since it covers a lot of safe listing ground.

Result of the component

In this brief introduction to this blade tooltip component, we explored the basic concepts and functionality of this powerful feature in the Laravel framework. We also looked at some additional features and ideas that you can use to enhance your blade templates and improve your development workflow. Whether you are a seasoned Laravel developer or just starting out, blade components can be a valuable tool in your toolkit, allowing you to create reusable, modular, and dynamic views with ease. I hope this dive into the world of blade components has been helpful, and I encourage you to continue learning and experimenting with these features to further improve your skills and efficiency as a developer.

Improve the component

If you like, you can create an extra prop or something and load the positioning classes inside the component conditionally. If I had done it, I would have added a new prop position="top|right|left|bottom and used the @class blade directive. I have a post about this here ๐Ÿ”—.

Get Better at Laravel!

Do you know what is the best way to learn Laravel? Laracasts of course! What else?

Why Every Dev is Raving About Laracasts:

๐Ÿš€ All-Star Cast: Learn Laravel from the best! We're talking the creator of Laravel, Taylor Otwell, the genius behind Livewire, Caleb Porzio, and more Laravel legends.

๐Ÿ› ๏ธ Full Toolkit: Itโ€™s not just Laravel! Dive deep into Livewire, Alpine.js, and the entire Laravel ecosystem and its intricacies.

๐Ÿ”„ Always Fresh: With direct insights from industry leaders, youโ€™re getting content thatโ€™s not just up-to-date, but ahead of its time.

๐Ÿ’ก Real-World Ready: Theoryโ€™s cool, but practical knowledge? Priceless. Jump from lesson to project seamlessly.

๐Ÿ‘ฉโ€๐Ÿ’ป Join the Elite: Step into a community thatโ€™s all about pushing boundaries and perfecting the craft.

Bottom line: Want to level up fast? Laracasts is your jam. Dive in using my referral link and join the coding revolution. ๐Ÿ”— Laracasts

Conclusion

If you found this helpful let me know on ๐Ÿฅ @DevThanos โค๏ธ, I will continue to post mini-posts like this because I believe that sometimes people want a brief overview of how to do something rather than a lengthy, in-depth explanation of a small amount of code.

Stay tuned ๐Ÿ“ป Share the post if you liked it, and If you loved it... Give it a Crown ๐Ÿ‘‘! ๐Ÿ˜‰

Learn more about the Sudorealm Project, we are constantly trying to make it better and we are so thankful that you have clumsily stumbled upon us! Hope you like our style.

I am @d3ad R1nger, Creator of Sudorealm, thank you for reading.

๐Ÿฅ @DevThanos

d3ad R1nger buymeacoffee

Affiliate Links

Check out what d3ad R1nger suggests for Laravel blade tooltip svg component!

Ready to Forge an Alliance
๐Ÿค

Join our alliance and play a pivotal role in the evolution of our digital realm! By aligning with our pricing model, you're not just accessing premium features; you're becoming an integral part of our journey. As an ally, your support propels us forward, ensuring we continue to innovate and thrive.

Lifetime membership

As valued allies, exclusive content awaits you ๐Ÿ‘€. Unlock a suite of premium features and gain early access to ally-only enhancements in our realm. With our month-by-month commitment, you're always privy to our most coveted updates!

What's included

  • Premium Content Access
  • Ally resources + Unique Ally Badge
  • Access to Affiliate store front ๐Ÿค‘ (๐Ÿ”ฎ)
  • More to come...

It's like buying a pint ๐Ÿบ. But less!

โ‚ฌ1.99 EUR

Forge Alliance

Invoices and receipts available for easy company reimbursement

Subscribe to our newsletter.

๐Ÿ‘‹ Hey there, Realmer! Fancy getting a byte of nerdy knowledge straight to your inbox? Subscribe to our Sudorealm newsletter and don't miss a single trick from our growing community of curious minds! Ready to level up your knowledge game? Join us in the Realm today!

Be one of the privileged few
Think of it as your VIP pass into the Realm where you'll get first dibs on new features, insider updates, and more.
No spam
And, worry not, we promise not to spam โ€“ just top-tier, brain-tickling content.