Pop-up video alignment


I’m still new to coding ect. so this maybe simple for you. Anyway, is there a way to align the gifs that pop-up when the mouse hovers over a link?

my basic code:

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  $(function() {
    $( document ).tooltip({
      items: "img, [data-geo], [title]",
      content: function() {
        var element = $( this );
        if ( element.is( "[data-geo]" ) ) {
          var text = element.text();
          return "<img class='map' alt='" + text +
            "' src='http://i.imgur.com/cwC4mF5.gif'>";
        if ( element.is( "[title]" ) ) {
          return element.attr( "title" );
        if ( element.is( "img" ) ) {
          return element.attr( "alt" );
    <h3>The <a href="http://www.freeimagehosting.net/dsjcp" data-geo="">Line segment</a> is a vital part of the equation.</h3>


Help is appreciated ~

Hi Mylo Xyloto. Welcome to the forums. :slight_smile:

We need to see your CSS. Could you post it here?

How do you want the image to align? Align with what?

I believe the alignment is controlled by the ui.js and will build a div adjacent to the h3 to hold the content and then place it absolutely. You would need to over-ride this inline styling and perhaps create a closer stacking context for the element. As Ralph said it all depends how you want this aligned and what CSS is already being applied.

If you have a link to the actual page it would be easier to debug:)

Well, I’m going to implement that code onto a moodle site I’ve created. Anyway, there’s no CSS yet (Thats all code that i got thus far, other that the moodle site). Also I want the gif positioned directly under the text.

I assume you are using the ui-tooltip so you should really refer to the documentation but I guess you need something like this:


Should this be in <style> tags in the head?

It should preferably be in your external stylesheet.

Usually the ui-widgets come with their own css files also but it doesn’t like as though you are using them.

So where should I put that code?

As I said above:

It should preferably be in your external stylesheet.

You are already linking to a css file called style.css so add it to that.

Fsr I cant access the css file, it displays “Not Found The requested URL /resources/demos/style.css was not found on this server.” So what now?


I’m a little confused so you may need to clarify. :slight_smile:

Why are you linking to a CSS stylesheet if you don’t know where it is.? Why did you add it to your page to start with? If that css wasn’t put there by you then what’s it doing in the code you posted?

These are simple questions and not meant to be a test but if you don’t know how to add a stylesheet to your page then you should speak up and we will try to help you. If you are using a CMS system (you mentioned moodle) then you may need to refer to their documentation as CMS’s handle custom files in various ways.

As a last resort you can add the css I gave to you and put it inside style tgas in the head of the page but you will need to to that for every page that you want to use it on.

Well I originally copied it from a site. I then edited out the unwanted code and customized it to my needs. http://jqueryui.com/tooltip/#custom-content <- the site.


The tooltip widget uses the ui_css which you haven’t utilised. If you need it then you should download it and place it on your site. If you don’t need it then get rid of the link to a non existent file :slight_smile:

You’ve just copied a relative link into your page which will do nothing unless you have the same named file on your server.