Laravel blade SVG component part 2: Tooltips with alpine.js

Laravel blade SVG component part 2: Tooltips with alpine.js

Realm Coding

5 min read

Hey there, fellow SVG enthusiasts! Remember when we embarked on that adventure of creating a dynamic SVG component with Laravel Blade? We dove deep, solving the problem of bloated SVG lists, and, lo and behold, we crafted a single, mighty SVG component to rule them all. If you missed it, take a peek at Part 1. ๐Ÿš€

Alright, let's level up! Today, Iโ€™m back with part 2, and itโ€™s time to sprinkle some magic dust on our SVGs. Letโ€™s talk tooltips with Alpine.js. Because why should SVGs just be visual? Letโ€™s make them informative! ๐Ÿค“โœจ

Enhancing SVGs with Alpine Tooltip Integration

Integrating user-friendly elements into our designs ensures a seamless user experience. Enter Alpine Tooltip - a custom directive crafted for Alpine.js by Ryan Chandler. By integrating this directive with our SVG components, we'll effortlessly add interactive tooltips to our icons. This guide walks you through the integration process, showcasing how you can enhance your SVGs to be more interactive and informative. Elevate your SVG game and provide users with clear, context-rich visuals, making your site stand out both in terms of usability and SEO.

โผป1. Install Alpine-Tooltip

Install via NPM Begin by installing the package using npm:

npm install @ryangjchandler/alpine-tooltip

Register the Tooltip Directive After the installation, we need to add the x-tooltip directive to our Alpine.js project. To do this, register the plugin with Alpine in our resources/app.js:

import Alpine from "alpinejs";
import Tooltip from "@ryangjchandler/alpine-tooltip"; //THIS IS NEW

Alpine.plugin(Tooltip); // THIS IS NEW ALSO

window.Alpine = Alpine; 
window.Alpine.start();

Add the required CSS: For the tooltips to display correctly, we must include the appropriate CSS. Include the following stylesheet in our HTML document:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />

โผป2. Update the current to use tooltips

The power of blade lies in its flexibility and extensibility. Let's take our SVG component to the next level by integrating tooltips. And the coolest of all is that we can tweak the component in such a way that it will not produce any bugs whatsoever on the already applied components in our project.

Before: The SVG component was straightforward. It rendered SVG icons from the tabler-sprite.svg file. However, there was no provision for tooltips.

<svg {{ $attributes }} width="24" height="24">
    <use xlink:href="{{ asset('tabler-sprite.svg').'#tabler-'.$svg }}" />
</svg>

After: Now, we've enhanced the SVG component. By integrating the x-tooltip directive, we can easily display tooltips on SVG icons. The new component structure accepts two properties: title for the tooltip content and svg for the SVG icon reference.

@props([
    'title' => '',
    'svg' => '',
])

<svg {{ $attributes }} x-data x-tooltip.raw="{{ $title }}" width="24" height="24">
    <use xlink:href="{{ asset('tabler-sprite.svg').'#tabler-'.$svg }}" />
</svg>

Now we can use this cool component like this:

<x-svg
    svg="news"
    title="Show Post"
    class="text-indigo-400 transition cursor-pointer hover:text-indigo-600"
/>

And we are all set!

๐Ÿ“šDocumentation

With the alpine-tooltip directive now part of our SVG component, there's a whole new world of enhancements and tweaks at our fingertips. And this is just the beginning!

If you're curious about further amplifying the capabilities of this component, check out the alpine-tooltip directive's documentation. It offers insights into advanced configurations, modifications, magic functions, and more.

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

Thanks for joining me on this SVG component journey with Laravel and Alpine.js. I'm always on the lookout for cool updates and ways to make things better. Whenever I find something new and exciting, I'll be sure to share it here. So, stay tuned for more updates in this series. Keep coding and exploring!

๐Ÿš€ Spread the Love & Support the Realm

Hey there, fellow Realmer! If this guide illuminated a new path in your coder/hacker journey, your support would mean a lot. Every bit of magic helps.

Spread the Love

๐Ÿ‘‘ Crown & Share: If you found value in this post, please give it a crown and share it with your fellow coder/hacker enthusiasts. Spreading knowledge is what Sudorealm is all about! Fun fact the Author with the most crowns inside a realm will be crowned as the Realm King! ๐Ÿคด

๐Ÿ†‡ X Shoutout: Feeling extra grateful or have some cool feedback? Drop me a shoutout on Twitter โ€“ I'd love to hear from you! d3adR1nger on X

๐Ÿ’ฌ Join our Discord Server: Join the Sudorealm Discord Server connect with fellow enthusiasts and chat about everything that fascinates you! From new blog post suggestions to seeking support on tricky tutorials. Come, share your ideas, and let's grow together! ๐Ÿš€๐ŸŒ

Support the Realm

๐Ÿ› Affiliate Treasures Below: Dive into the depths below the post to uncover some affiliate products I've curated just for you. It's a great way to support the realm and discover some nerdy treasures.

โ˜•๏ธ Coffee Driven Development: Love what you're reading? Fuel my passion for coding with a delicious cup of coffee! Every sip powers up another line of code and helps bring more exciting content your way. Support my caffeine-fueled coding adventures and let's brew up something amazing together! โ˜•๐Ÿ‘จโ€๐Ÿ’ป Join the journey and BuyMeACoffee

Thanks for being a part of our realm. Every bit of support propels our community to new horizons. Until next time, keep exploring!

Affiliate Links

Check out what d3ad R1nger suggests for Laravel blade SVG component part 2: Tooltips with alpine.js!

  • Programming Stickers for Coder/Hacker People affiliate image
    Coding

    Programming Stickers for Coder/Hacker People

  • GeeekPi Raspberry Pi 4 4GB Starter Kit - 64GB Edition affiliate image
    Hacking Gear

    GeeekPi Raspberry Pi 4 4GB Starter Kit - 64GB Edition

    Kickstart your DIY project. Featuring a 4GB RAM Pi 4B, protective case with a cooling PWM fan, 18W power supply, and HDMI cables. Compact power for your next project!

  • OXO Good Grips Sweep & Swipe Laptop Cleaner, White, One Size affiliate image
    Gadgets

    OXO Good Grips Sweep & Swipe Laptop Cleaner, White, One Size

    We all know there are chip crumbs on your oily keyboard keys.

  • NXET Headphone Stand affiliate image
    Office

    NXET Headphone Stand

    Universal Aluminum Holder Showing Display Hanger

  • GUNNAR - Premium Gaming and Computer Glasses affiliate image
    Coding

    GUNNAR - Premium Gaming and Computer Glasses

    Blue light blocking computer and gaming glasses

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.