0

我正在使用qTip2来处理我网站上的一些工具提示。我在它适用的页面的模板中有以下代码：

HTML

<div class="overview"><a href="#"><img class="border-gray" src="src.jpg"></a></div>
<div class="estimate"><a href="#"><img class="border-gray" src="src.jpg"></a></div>
<!-- More HTML similar to above -->

JS

$('.overview').qtip({
  content: 'Overview',
  position: {
    my: 'bottom center', 
    at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});
$('.estimate').qtip({
   content: 'Estimating',
   position: {
     my: 'bottom center', 
  at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});
//More JS as above

如果类与页面相关，我希望在各个页面上显示工具提示。IE：site.com/overview将具有overview始终可见类的工具提示。就像site.com/estimate工具提示estimate可见一样。

我试图将此代码添加到页面，但它不起作用：

$('.overview').qtip({
   hide: false
});

我所追求的是页面加载时工具提示可见。不需要鼠标悬停等。可见的工具提示将取决于可见的页面。IE: /overview=.overview工具提示。

我怎样才能做到这一点？

更新

以下代码将实现我正在寻找的内容：

$('.overview').qtip({
   content: 'Overview',
   position: {
     my: 'bottom center', 
     at: 'top center'
},
  show: {
    ready: true
},
  hide: false,
  style: {classes: 'qtip-tipsy'}
});

但是，这部分代码位于模板中，无法在页面级别进行编辑：

$('.overview').qtip({
  content: 'Overview',
  position: {
    my: 'bottom center', 
    at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});

如果我在上面的代码下面尝试这个它不起作用：

$('.overview').qtip({
    show: { ready: true },
    hide: false

});

如果一个在页面级别不可编辑，我如何将两者结合起来？IE：如果我无法在页面级别编辑代码，如何将showand代码添加到上述代码中？hide

4

2 回答 2

1

SHOWING BY DEFAULT

$('.overview').qtip({
  content: 'Overview',
  position: {
      my: 'bottom center', 
      at: 'top center'
    },
  style: {classes: 'qtip-tipsy'},
  show: { ready: true }
  });

This is the line you need:

show: { ready: true }

Here is the documentation:
gTip: http://craigsworks.com/projects/qtip/docs/reference/#show
gTip2: http://craigsworks.com/projects/qtip2/docs/show/#ready

SHOWING CONDITIONALLY

<?php
  // Get the url
  $current_url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
  // Get the two parts of the url, seperated by: /
  $url_array = explode('/', $current_url);
?>

<script>
  $('.overview').qtip({
    content: 'Overview',
    position: {
      my: 'bottom center', 
      at: 'top center'
    },
    /* Check if the second part of the url is 'overview'
       If it is, add the show ready code */
    <?php if( isset( $url_array[1] ) && $url_array[1] == 'overview' ) : ?>
      show: { ready: true },
    <?php endif; ?>
    style: {classes: 'qtip-tipsy'}
  });
</script>

SHOWING CONDITIONALLY | ONLY JAVASCRIPT

<script type="text/javascript">
  $(document).ready(function() 
    {
      // Prepare some variables
      var current_url = window.location.host + window.location.pathname;
      var url_array = current_url.split('/');
      // The qtip code
      $('.overview').qtip({
        content: 'Overview',
        position: {
          my: 'bottom center', 
          at: 'top center'
        },
        show: { ready: url_array[1] == overview ? true : false },
        style: {classes: 'qtip-tipsy'}
      });
  });
</script>
于 2013-01-18T03:59:04.937 回答
-2 
 show: {
     ready: true
 },
 hide: {
     event: false
 }
于 2014-01-06T17:34:58.423 回答