Jquery 如何在wordpress插件中添加工具提示

我正在尝试在wordpress插件中为自己添加附加功能，但我不明白如何才能做到这一点，我对jQuery不太在行

我正在尝试添加工具提示，但我不知道，你们能不能指导我

我在脚本中添加了以下行：

wp_enqueue_script( 'jquery_ui_tooltip', CHILD_URL . '/widgets/genesis-tabs/jquery-ui.js', false, '1.9.2' );

及

这些是插件的代码

<?php
add_action( 'wp_head', 'head_slideshow', 1 );
function head_slideshow() {
    // javascript
    wp_enqueue_script( 'tabs_script', CHILD_URL . '/widgets/genesis-tabs/tabs.js', array( 'jquery' ), '1.3.2' );
    wp_enqueue_script( 'jquery_ui_tooltip', CHILD_URL . '/widgets/genesis-tabs/jquery-ui.js', false, '1.9.2' );
    // styles
    wp_register_style( 'tabs_styles', CHILD_URL . '/widgets/genesis-tabs/style.css' );
    wp_register_style( 'jquery_ui_styles', CHILD_URL . '/widgets/genesis-tabs/jquery-ui.css' );
    wp_enqueue_style( 'tabs_styles' );
    wp_enqueue_style( 'jquery_ui_styles' );
}

add_action( 'widgets_init', 'TabsWidgetRegister' );
function TabsWidgetRegister() {
    register_widget( 'TabsWidget' );
}

class TabsWidget extends WP_Widget {

    function TabsWidget() {
        $widget_ops = array( 'classname' => 'tabs-widget', 'description' => __('Genesis - Home Featured') );
        $control_ops = array( 'width' => 300, 'height' => 250, 'id_base' => 'tabs-widget' );
        $this->WP_Widget( 'tabs-widget', __('Genesis - Home Featured'), $widget_ops, $control_ops );
    }

    function widget( $args, $instance ) {
        extract( $args );
        echo $before_widget;
    ?>

    <!-- .home-left -->
    <div class="carousel-slider-preview">
    <?php
        $args = array (
                    'post_type' => 'post',
                    'cat' => $instance['posts_cat'],
                    'showposts' => $instance['posts_num'],
                    'orderby' => $instance['orderby'],
                    'order' => $instance['order']
                );  
        $posts_list = new WP_Query($args);
        $i = 1;
        if($posts_list->have_posts()) : while($posts_list->have_posts()) : $posts_list->the_post();
    ?>
        <!-- .tab_content -->
        <div id="tab<?php echo $i; ?>" class="tab_content">
            <!-- .image -->
            <div class="image">
                <a href="#tab<?php echo $i; ?>"><?php genesis_image("format=html&size=Slider"); ?></a>
            </div>

            <!-- .text -->
            <div>

    <?php
            if ( !empty( $instance['show_byline'] ) && !empty( $instance['post_info'] ) ) :
                printf( '<p class="byline post-info">%s</p>', do_shortcode( esc_html( $instance['post_info'] ) ) );
            endif;

            if(!empty($instance['show_title'])) :
                printf( '<h2><a href="%s" title="%s">%s</a></h2>', get_permalink(), the_title_attribute('echo=0'), the_title_attribute('echo=0') );
            endif;

            if(!empty($instance['show_content'])) :
            if($instance['show_content'] == 'excerpt') :
                the_excerpt();
            elseif($instance['show_content'] == 'content-limit') :
                the_content_limit( (int)$instance['content_limit'], esc_html( $instance['more_text'] ) );
            else :
                the_content( esc_html( $instance['more_text'] ) );
            endif;
            endif;
    ?>
            </div>
            <!-- end .home_left_content -->
        </div>
        <!-- end .tab_content -->       

    <?php
            $i += 1;
            endwhile; 
            endif; 
    ?>
    </div>
    <!-- end .home-left -->

    <div class="clear"></div>

    <!-- .carousel-slider-thumbs -->
    <div class="carousel-slider-thumbs">
        <ul class="tabs">
        <?php
                $i = 1; 
                if($posts_list->have_posts()) : while($posts_list->have_posts()) : $posts_list->the_post();
        ?>
        <li><a href="#tab<?php echo $i; ?>"><?php genesis_image("format=html&size=Small"); ?></a></li>  
        <?php
            $i += 1;
            endwhile;
            endif;
        ?>
        </ul>
    </div>
    <!-- end .carousel-slider-thumbs -->

        <div class="clear"></div>
    <?php
        echo $after_widget;
    }

    function form( $instance ) {

        // ensure value exists
        // 'heading' => '',  ( Extended by Muzammil Hussain )
        $instance = wp_parse_args( (array)$instance, array(
            'heading' => 'Featured Area', 
            'title' => '',
            'show_title' => 0,
            'posts_cat' => '',
            'posts_num' => 0,
            'orderby' => '',
            'order' => '',
            'show_byline' => 0,
            'post_info' => '[post_date] ' . __('By', 'genesis') . ' [post_author_posts_link] [post_comments]',
            'show_content' => 'excerpt',
            'content_limit' => '',
            'more_text' => __('[Read More...]', 'genesis')
        ) );

        ?>

    <p>
        <label for="<?php echo $this->get_field_id( 'heading' ); ?>"><?php _e('Title:'); ?></label>
        <input type="text" id="<?php echo $this->get_field_id( 'heading' ); ?>" name="<?php echo $this->get_field_name( 'heading' ); ?>" value="<?php echo $instance['heading']; ?>" class="widefat" />
    </p>

    <p>
        <label for="<?php echo $this->get_field_id( 'posts_num' ); ?>"><?php _e('Number of Posts to Show:'); ?></label>
        <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'posts_num' ); ?>" name="<?php echo $this->get_field_name( 'posts_num' ); ?>" value="<?php echo $instance['posts_num']; ?>" style="width:30px;" />
    </p>

    <p>
      <label for="<?php echo $this->get_field_id('orderby'); ?>"><?php _e('Order By'); ?>:</label>
      <select class="widefat" id="<?php echo $this->get_field_id('orderby'); ?>" name="<?php echo $this->get_field_name('orderby'); ?>">
        <option style="padding-right:10px;" value="date" <?php selected('date', $instance['orderby']); ?>><?php _e('Date'); ?></option>
        <option style="padding-right:10px;" value="title" <?php selected('title', $instance['orderby']); ?>><?php _e('Title'); ?></option>
        <option style="padding-right:10px;" value="parent" <?php selected('parent', $instance['orderby']); ?>><?php _e('Parent'); ?></option>
        <option style="padding-right:10px;" value="ID" <?php selected('ID', $instance['orderby']); ?>><?php _e('ID'); ?></option>
        <option style="padding-right:10px;" value="comment_count" <?php selected('comment_count', $instance['orderby']); ?>><?php _e('Comment Count'); ?></option>
        <option style="padding-right:10px;" value="rand" <?php selected('rand', $instance['orderby']); ?>><?php _e('Random'); ?></option>
      </select>
    </p>

        <p>
      <label for="<?php echo $this->get_field_id('order'); ?>"><?php _e('Sort Order'); ?>:</label>
      <select class="widefat" id="<?php echo $this->get_field_id('order'); ?>" name="<?php echo $this->get_field_name('order'); ?>">
        <option style="padding-right:10px;" value="DESC" <?php selected('DESC', $instance['order']); ?>><?php _e('Descending (3, 2, 1)'); ?></option>
        <option style="padding-right:10px;" value="ASC" <?php selected('ASC', $instance['order']); ?>><?php _e('Ascending (1, 2, 3)'); ?></option>
      </select>
    </p>

    <p>
        <input class="checkbox" id="<?php echo $this->get_field_id('show_title'); ?>" type="checkbox" name="<?php echo $this->get_field_name('show_title'); ?>" value="1" <?php checked(1, $instance['show_title']); ?>/> <label for="<?php echo $this->get_field_id('show_title'); ?>"><?php _e('Show Post Title', 'genesis'); ?></label>
        <br>    
        <input class="checkbox" id="<?php echo $this->get_field_id('show_byline'); ?>" type="checkbox" name="<?php echo $this->get_field_name('show_byline'); ?>" value="1" <?php checked(1, $instance['show_byline']); ?>/> <label for="<?php echo $this->get_field_id('show_byline'); ?>"><?php _e('Show Post Byline'); ?></label>
    </p>
    <p>
      <input type="text" id="<?php echo $this->get_field_id('post_info'); ?>" name="<?php echo $this->get_field_name('post_info'); ?>" value="<?php echo esc_attr($instance['post_info']); ?>" style="width: 99%;" />
    </p>

    <p>
      <label for="<?php echo $this->get_field_id( 'posts_cat' ); ?>"><?php _e('Category:'); ?></label>
        <?php wp_dropdown_categories(array('name' => $this->get_field_name('posts_cat'), 'selected' => $instance['posts_cat'], 'orderby' => 'Name' , 'hierarchical' => 1, 'show_option_all' => __("All Categories"), 'hide_empty' => '0')); ?>
        </p>

    <p>
      <label for="<?php echo $this->get_field_id('show_content'); ?>"><?php _e('Content Type', 'genesis'); ?>:</label>
      <select class="widefat" id="<?php echo $this->get_field_id('show_content'); ?>" name="<?php echo $this->get_field_name('show_content'); ?>">
        <option value="content" <?php selected('content' , $instance['show_content'] ); ?>><?php _e('Show Content', 'genesis'); ?></option>
        <option value="excerpt" <?php selected('excerpt' , $instance['show_content'] ); ?>><?php _e('Show Excerpt', 'genesis'); ?></option>
        <option value="content-limit" <?php selected('content-limit' , $instance['show_content'] ); ?>><?php _e('Show Content Limit', 'genesis'); ?></option>
        <option value="" <?php selected('' , $instance['show_content'] ); ?>><?php _e('No Content', 'genesis'); ?></option>
      </select>
      <br />
      <br />
      <label for="<?php echo $this->get_field_id('content_limit'); ?>"><?php _e('Limit content to', 'genesis'); ?></label> 
      <input class="widefat" type="text" id="<?php echo $this->get_field_id('image_alignment'); ?>" name="<?php echo $this->get_field_name('content_limit'); ?>" value="<?php echo esc_attr(intval($instance['content_limit'])); ?>" size="3" /> <?php _e('characters', 'genesis'); ?>
    </p>

        <p>
      <label for="<?php echo $this->get_field_id('more_text'); ?>"><?php _e('More Text (if applicable)', 'genesis'); ?>:</label>
      <input class="widefat" type="text" id="<?php echo $this->get_field_id('more_text'); ?>" name="<?php echo $this->get_field_name('more_text'); ?>" value="<?php echo esc_attr($instance['more_text']); ?>" />
    </p>

    <?php
    }
}

?>

当有人将鼠标移到“小图像”选项卡上时，我试图在工具提示中显示每个图像的描述，

如果您使用工具提示，我认为该功能非常简单，只需将其添加到整个文档中，并且它将使用任何元素的title属性作为提示。在jQuery文件中，将此行添加到$jqdocument.readyfunction之后{

然后，只需确保所有图像都具有title属性

<img src="someimage.jpg" title="Here is a great image">

---

另外，在wp_enqueue_脚本中，将false更改为数组“jquery”，这意味着您需要在加载jquery ui之前先加载jquery

var $jq=jQuery.noConflict();

$jq(document).ready(function(){
    $jq(".tab_content").hide();
    $jq("ul.tabs li:first").addClass("active").show();
    $jq(".tab_content:first").show();
    $jq("ul.tabs li").click(function(){
        $jq("ul.tabs li").removeClass("active");
        $jq(this).addClass("active");
        $jq(".tab_content").hide();

        var activeTab = $jq(this).find("a").attr("href");
        $jq(activeTab).fadeIn();

    return false
    })
});

    $jq(document).tooltip();

<img src="someimage.jpg" title="Here is a great image">