I've searched all I can about this and found answers that are seemingly correct. But it doesn't work for me. I have this CKEditor inside a div. Inside this CKEditor, there are lots of content and I want to add a hover event on all H1 styles inside this editor.

The div structure looks like this:

<div id="content" class="cke_editable">
   <h1>
      <span>My content</span>
    </h1>
</div>

I'm trying to use qTip2 actually, since it seems to fit my needs. But I can't manage to select the H1 tag. Is it because it's inside a div which has both an ID and a class? Or does it have anything to do with the fact that there's a <span> tag inside the H1?

Here's the javascript:

<script type="text/javascript">
var shared = {
    position: {
        my: 'top left', 
        at: 'bottom right',
    },
    style: {
        tip: true
    }
};

$('h1').qtip( $.extend({}, shared, { 
    content: 'An example tooltip',
    style: {
        classes: 'ui-tooltip-red'
    }
}));
</script>

When it es to the selector, I've tried selecting only H1, like in this example. As well as $('.cke_editable h1'), $('#content h1') and $('#content > h1'). But no dice. In my CSS, I've successfully added cursor: pointer to #content h1. And that works.

Am I doing something wrong here?

Edit: If I select $('#content').qtip directly, it works btw.

I've searched all I can about this and found answers that are seemingly correct. But it doesn't work for me. I have this CKEditor inside a div. Inside this CKEditor, there are lots of content and I want to add a hover event on all H1 styles inside this editor.

The div structure looks like this:

<div id="content" class="cke_editable">
   <h1>
      <span>My content</span>
    </h1>
</div>

I'm trying to use qTip2 actually, since it seems to fit my needs. But I can't manage to select the H1 tag. Is it because it's inside a div which has both an ID and a class? Or does it have anything to do with the fact that there's a <span> tag inside the H1?

Here's the javascript:

<script type="text/javascript">
var shared = {
    position: {
        my: 'top left', 
        at: 'bottom right',
    },
    style: {
        tip: true
    }
};

$('h1').qtip( $.extend({}, shared, { 
    content: 'An example tooltip',
    style: {
        classes: 'ui-tooltip-red'
    }
}));
</script>

When it es to the selector, I've tried selecting only H1, like in this example. As well as $('.cke_editable h1'), $('#content h1') and $('#content > h1'). But no dice. In my CSS, I've successfully added cursor: pointer to #content h1. And that works.

Am I doing something wrong here?

Edit: If I select $('#content').qtip directly, it works btw.

• javascript
• jquery
• css
• qtip2

• Does CKEditor even create those elements? I thought it was just a textarea with html in it. – Kippie Commented Feb 19, 2013 at 7:35
• What do you mean? CKEditor creates H1 elements if I select the Heading style. CKEditor is applied to all divs with the cke_editable class set. As well as contenteditable="true" – Kenny Bones Commented Feb 19, 2013 at 7:41

2 Answers 2

The CKEditor creates an iframe where it puts the content, so you can't use a jQuery selector to select the element inside it, as it's not even in the same document any more.

Try to put it like this:

$('h1','#content').qtip

or:

$('#content').find('h1').qtip