How to display laravel eloquent data with jquery "Ajax" tooltip?

Question

I'm a beginner in laravel. I have a index.blade.php file that data is in table form:

    <table class="table table-striped">
        <thead>
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Available Date</td>
                <td colspan = 2>Actions</td>
            </tr>
        </thead>
        <tbody id="myTable">
            @foreach($event_detail['participants'] as $participant)
            <tr>
                <td class="can_filter">{{ $participant['id'] }}</td>
                <td class="can_filter" onmouseover="tooltip(this);">{{ $participant['name'] }}</td>
                <td class="can_filter">{{ $participant['date'] }}</td>
                <td>
                    <a href="{{ route('participants.edit', $participant['id']) }}" class="btn btn-primary">
                        Edit</a>
                </td>
                <td>
                    <form action="{{ route('participants.destroy', $participant['id']) }}" method="post">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-danger" type="submit">
                            Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

and I want to show some eloquent data(participant name, date which is in mysql DB. and it's connected already.) with this "tooltip(this);" JS function:

$("tr").tooltip({
            track: true,
               $.ajax({
                    url:  
                    type:'post',
                    data:
                    success: function(){
                    }
                });
            }
        });

but I have no idea which attribute this tooltip function needs. any ideas?

Why not render the tooltip when the page load instead of doing another ajax call? — rfpdl
– rfpdl, Commented Oct 7, 2019 at 5:37
oh I got kind of a request from client(customer). I got to use ajax ;a; — Juno J
– Juno J, Commented Oct 7, 2019 at 6:34
When a client make a request, it is up to you what kind of solution will you provide unless they specify it should be ajax. Imagine playing your mouse all over the tr and there are multiple ajax spamming your server. Just a tip :) — rfpdl
– rfpdl, Commented Oct 7, 2019 at 7:06
Thx for your reply : ) yeah, it should be ajax.. I want to display [ $participant->date(supposed there's "participant" table and "date" column in DB) ] on tooltip using ajax. And also you're right.. hmm.. then onclick might be better.. — Juno J
– Juno J, Commented Oct 8, 2019 at 0:28

Zain Farooq · Accepted Answer · 2019-10-07 06:59:38Z

1

I am going to give you the basic solution for this. Rest you will customize accordingly.
First you can add a default title attribute inside the HTML tag where you want to show the tooltip.

<td class="can_filter" id="tooltip_td" title="Any default tooltip title">{{ $participant['name'] }}</td>

Then in the jquery you can use the title attribute to add the tooltip title

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#tooltip_td').attr('title', "{{ $laravelTooltip }}");
    });
</script>

You can also do this without adding the default tooltip title. This is the basic solution and I hope you will get the basic understanding and can customize it at your own.

answered Oct 7, 2019 at 6:59

Zain Farooq

2,9664 gold badges23 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Juno J Over a year ago

Thanks! But, I know how to use tooltip, but the thing is I got to use "Ajax". I want to display [ $participant->date(supposed there's "participant" table and "date" column in DB) ] on tooltip using ajax!

Zain Farooq Over a year ago

I have given you the basic info. You can use jQuery under ajax function

Zain Farooq Over a year ago

Like

$.ajax({                     url:                       type:'post',                     data:                     success: function(data){                       $('#tooltip_td').attr('title', data);   }                 });

Collectives™ on Stack Overflow

How to display laravel eloquent data with jquery "Ajax" tooltip?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related