Question By
Solved
Wave v3 Drift Theme with Combination of Fusion
Solved
Hello Team! Can you help me figure out why the tooltips looks like this?
https://img001.prntscr.com/file/img001/36i9AmARTnOfQfxZhTBPxA.png
Is this has something to do with the theme I installed?
This is filament table with toggleable.
Loom for reference.
https://www.loom.com/share/ee016ec6c503488097d2364d23f69fa7
Hey Carlos! 👋
This is quite interesting.
Regarding the theme confirmation: just to confirm, you are using the Fusion theme for your dashboard correct?
And for the component setup: Can you share a code snippet of the Filament Volt component you're using for this table?
Also if you don't mind can you share how you're toggling and adding the links in your menu? Are you using the wire:navigate?
I've created a livewire not volt since it will stored in another dimension (inside the vendor)
<?php
namespace App\Livewire\Components;
use App\Events\LocationsEvent;
use App\Events\UserEvent;
use App\Models\Company;
use Auth;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\ImageColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Columns\ViewColumn;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Table;
use App\Models\Location;
use Livewire\Component;
use Filament\Tables\Filters\Filter;
use Filament\Tables\Filters\SelectFilter;
use Illuminate\Database\Eloquent\Builder;
use Filament\Tables\Actions\BulkActionGroup;
use Filament\Tables\Actions\DeleteBulkAction;
use Illuminate\Contracts\View\View;
// use Filament\Tables\Actions\Action;
use Filament\Tables\Columns\Layout\Stack;
use Filament\Tables\Columns\Layout\Panel;
use Filament\Tables\Columns\Layout\Split;
use Livewire\Attributes\On;
class LocationsTable extends Component implements HasTable, HasForms
{
use InteractsWithTable, InteractsWithForms;
public Company $company;
public function render()
{
return view('livewire.components.locations-table');
}
public function table (Table $table)
{
// $query = $this->company->locations;
// \Log::info(message);
return $table
->query(Location::query()->where('company_id', $this->company->id))
->columns([
TextColumn::make('Avatar')
->label('')
->toggleable()
->view('filament.tables.columns.avatar'),
TextColumn::make('name')
->label('Location Name')
->searchable()
->sortable()
->limit(50)
->toggleable(),
TextColumn::make('location_id')
->label('ID')
->searchable()
->icon('heroicon-o-map-pin')
->iconPosition('before')
->toggleable(),
TextColumn::make('Owner')
->searchable()
->sortable()
->toggleable()
->view('filament.tables.columns.full-name'),
TextColumn::make('email')
->searchable()
->sortable()
->icon('heroicon-o-envelope')
->iconPosition('before')
->toggleable(),
TextColumn::make('phone')
->searchable()
->sortable()
->icon('phosphor-phone')
->iconPosition('before')
->toggleable(),
TextColumn::make('data.address')
->toggleable()
->searchable()
->sortable()
->icon('heroicon-o-map')
->iconPosition('before')
->label('Full Address'),
TextColumn::make('data.city')
->toggleable()
->searchable()
->sortable()
->icon('phosphor-city-light')
->iconPosition('before')
->label('City'),
TextColumn::make('data.postalCode')
->toggleable()
->searchable()
->sortable()
->label('Postal Code'),
TextColumn::make('data.state')
->toggleable()
->searchable()
->sortable()
->label('State'),
TextColumn::make('data.country')
->toggleable()
->searchable()
->sortable()
->icon('heroicon-o-globe-americas')
->iconPosition('before')
->label('Country'),
TextColumn::make('data.timezone')
->toggleable()
->searchable()
->sortable()
->icon('phosphor-clock')
->iconPosition('before')
->label('Timezone'),
TextColumn::make('data.dateAdded')
->toggleable()
->searchable()
->sortable()
->icon('phosphor-calendar-blank-light')
->iconPosition('before')
->date()
->label('Created at'),
ViewColumn::make('Actions')
->view('filament.tables.columns.view-location')
])
->defaultSort('name', 'asc')
// ->defaultSortOptionLabel('Location Name')
// ->persistSortInSession()
->bulkActions([
BulkActionGroup::make([
DeleteBulkAction::make(),
]),
])
->defaultPaginationPageOption(25)
/* ->actions([
Action::make('Actions')
->label('')
->icon('heroicon-o-eye')
->url(fn (Location $record): string => $record->company->whitelabel."v2/location".$record->location_id."/dashboard")
->openUrlInNewTab()
]) */
->paginated([10, 25, 50, 100, 'all'])
->extremePaginationLinks()
->deferLoading();
// ->poll('10s');
}
#[On('echo-private:company.{company.id},LocationEvent')]
public function onLocationEvent($event)
{
\Log::info('pasok dito');
\Log::info($event);
}
}
This is the code for the wire:navigate. I'm really not sure why it refreshed when navigating.
<nav x-data class="flex flex-col mt-6 space-y-2">
<x-app.sidebar-link :href="route('dashboard')" tooltip="Home" icon="phosphor-house" wire:navigate/>
<x-app.sidebar-link :href="route('project')" tooltip="Project" icon="phosphor-chart-bar" wire:navigate/>
<x-app.sidebar-link :href="route('locations')" tooltip="Locations" icon="phosphor-map-pin-area-light" wire:navigate/>
<x-app.sidebar-link href="#_" tooltip="Messages" onclick="demoButtonClickMessage(event)" icon="phosphor-envelope" />
<x-app.sidebar-link href="#_" tooltip="Timesheet" onclick="demoButtonClickMessage(event)" icon="phosphor-clock" />
<x-app.sidebar-link href="#_" tooltip="Users" onclick="demoButtonClickMessage(event)" icon="phosphor-user" />
</nav>
Hey Carlos!
Thank you for the additional information! I am currently looking into this and will keep you posted!
Hey!
A quick fix for this tooltip and the rest of the problems that you are seeing will be:
- In
resources/themes/fusion/components/layouts/app.blade.php - Make sure that you have the following:
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
document.addEventListener('alpine:init', () => {
// use it in an instance like @click="$tooltip('hello')"
Alpine.magic('tooltip', el => message => {
let instance = tippy(el, { content: message, trigger: 'manual', animation: 'shift-away' })
instance.show()
setTimeout(() => {
instance.hide()
setTimeout(() => instance.destroy(), 150)
}, 2000)
})
// use the tooltip by applying x-tooltip to any element
Alpine.directive('tooltip', (el, { modifiers, expression }) => {
// Parse the expression if it's a JSON-like object string
let content = expression;
try {
if (expression.includes('content:')) {
const match = expression.match(/content:\s*'([^']*)'/)
if (match) {
content = match[1]
}
}
} catch (e) {
content = expression
}
if(modifiers[0]){
tippy(el, {
placement: modifiers[0],
content: content,
animation: 'shift-away'
})
} else {
tippy(el, {
content: content,
animation: 'shift-away'
})
}
})
})
</script>
I've made a change to the Alpine.directive('tooltip' to fix that JSON tooltip problem.
I will look into fixing this in the theme itself as well!
- Bobby