Tooltipsy doesn't show

[adloram]

I'm using it in a wordpress theme. I embedded the code needed in the header (header.php) this way:

<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/tooltipsy.min.js"></script>
<script type="text/javascript">
$('.hastip').tooltipsy({
    css: {
        'padding': '10px',
        'max-width': '200px',
        'color': '#303030',
        'background-color': '#f5f5b5',
        'border': '1px solid #deca7e',
        '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'text-shadow': 'none'
    }
});

$(document).ready(function(){         <- previous code
  $('.shad').textShadow();
})
</script>

And i found troubles with wordpress menus.

I can't write code for any single item in the menu so i can't directly add Title values. To to that i have to go into wordpress admin and search for the menu editor and add Title and the basic hastip class in the specific form.

After this the tooltips aren't working. (i'm using sample code provided by you for now) www.veronicalongo.com

Thank you in advance. Massimo

[briancray]

Try putting it inside $(document).ready(function(){ ... });

[adloram]

Now tooltipsy shows, but it shows this way, blank yellow square with shadow:

www.veronicalongo.com (without title attributes)

$(document).ready(function(){
    $('.hastip').tooltipsy({
        css: {
            'padding': '10px',
            'max-width': '200px',
            'color': '#303030',
            'background-color': '#f5f5b5',
            'border': '1px solid #deca7e',
            '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
            '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
            'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
            'text-shadow': 'none'
            }
        });
});

[adloram]

maybe because the title attribute is managed by wordpress and not directly on the code, so on first attempt tooltipsy doesn't read nothing because on the source code nothing is there?

[briancray]

I would add separate class names to each, then use the content setting to set the tooltip content

$(document).ready(function(){
    $('.hastip1').tooltipsy({
        content: 'tooltip content',
        css: {
            'padding': '10px',
            'max-width': '200px',
            'color': '#303030',
            'background-color': '#f5f5b5',
            'border': '1px solid #deca7e',
            '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
            '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
            'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
            'text-shadow': 'none'
            }
        });
});

[briancray]

Sorry, keep hitting comment and close

[adloram]

Perfect, Brian, perfect.

I really cannot thank you enough for helping me. Anyway, thanks!

[briancray]

Those words are music to my ears. Cheers!