jquery tooltip on custom nav?

I think I have this solved, just shows, walking away from something for a weekend and coming back to it with fresh eyes works!

Basically, I have added a filter to my functions.php to allow the formatting of the URL in the rel field for the custom menu

add_filter( 'sanitize_html_class', 'dont_filter_hash', 10, 2 );

function dont_filter_hash($sanitized, $raw) {

  if(!preg_match("#^http(s)?://[a-z0-9-_.]+\.[a-z]{2,4}#i", $raw)) {

    return $raw;

  } else { 

    return $sanitized;

  } 

}

Then, in the javascript instead of the class ‘screenshot’ being added to the ahref, I have applied it to a link within the list

$(".screenshot a").hover(function(e){ as opposed to $("a.screenshot ").hover(function(e){

Now I can add images to a tool tip rollover for specific links in my Nav.

Ideally I’d love a custom field to feed this image url to the menu, but that sounds like a monster sized task!!!

For some reason this is only working on my localhost, I have uploaded the functions file to my live site, and it’s no longer working!

——–

Tweaked the code to this. And it works great now.

add_filter( 'sanitize_html_class', 'dont_filter_hash', 10, 2 );

function dont_filter_hash($sanitized, $raw) {

if (!preg_match('#^http?://[a-z0-9-._]+\.[a-z0-9]{2,4}$#i', $raw)) {
    return $raw;

  } else { 

    return $sanitized;

  } 

}

stephen_lsd

YOU ROCK!!!!!!! I am so thankful for finding this post, thank you so much for sharing this! totally made my mother’s day ??

YES!!!!!

great stuff… glad it works for you… took me a good while to solve it!!!

so check it! here’s where I implemented your fancy codework ??

Custom WP Design Portfolio

I was trying to force the thumbs to be on the left of the menu items at the exact y coordinates; didn’t work out that way, but I still like it. I couldn’t use it with File Gallery plugin though, there was a javascript conflict – so I have to find something else for that, just using a temp gallery for now.

Nice site, looks really slick.

Strange how it won’t move to the right of your menu though.

#screenshot {
	position:absolute;
	margin-left: -125px;
	border: 1px solid #573e38;
	background: #735750;
	padding:5px;
	display:none;
	color: #fefbf7;
}

I think I was able to move mine around by altering the margin-left.

yea, i added that margin so it wouldn’t move to the right, I didn’t want it to be hidden if the browser was smaller. But since it’s going off the mouse movement it doesn’t allow the screenshots to be at an exact y coordinate. I haven’t really researched it enough to see if it’s possible yet though.