We help IT Professionals succeed at work.

How to get a mouseover and a click on the "data-toggle" link

Bruce Gust
Bruce Gust asked
on
High Priority
49 Views
1 Endorsement
Last Modified: 2020-02-27
Here's my code:

@foreach($videos as $video)
								<tr>
									<td><a data-toggle="modal" href="#video_player-{{ $video->id }}">{{ $video->title }}</a></td>
									<td style="text-align:center;"><a href="{{ url('/admin/show/video/' .$video->id) }}">edit</a> | <a data-toggle="modal" href="#deletePostModal-{{ $video->id }}">delete</a></td>
								</tr>
							@endforeach			

Open in new window


Bottom line: When the user clicks on the title of the video they get a popup that allows them to view the actual file.

I want to incorporate another feature, however, in that when the user hovers over the video title, they get a tooltip that lets them see the thumbnail associated with that file.

I can see how it's done, at least as far as being able to view some simple text like this:

https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

But how do I get two different functionalities to exist side by side with one being activated with a mouseover, the other with a click - both of which, apparently require the "data-toggle" dynamic?

Thanks!
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
Hey Bruce,

The data-toggle attr is just bootstrap's default way of triggering the event, but you're free to create your own. Take a look at something lie this:

<a data-toggle="modal" data-hover="myImage.jpg" href="#video_player-{{ $video->id }}">{{ $video->title }}</a>

You'll see we've added a new data attribute containing a the relative path of an image name (you can call the data-* attribute whatever you like, and make sure your image path is correct).

Then we just need a bit of jQuery to trigger the image when you hover over it:

$('[data-hover]').popover({
    html: true,
    trigger: 'hover',
    placement: 'bottom',
    content: function () { return '<img src="' + $(this).data('hover') + '" />'; }
});

Open in new window

Bruce GustPHP Developer

Author

Commented:
Go, dog, go!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.