带全日历的 Qtip

发布于 2024-12-22 21:07:37 字数 869 浏览 0 评论 0原文

我正在尝试学习 fullcalendar 的 qtip，但它似乎不起作用。我已经尝试了所有教程/示例，但没有像他们所说的那样有效。我正在使用以下代码，但我尝试了许多其他替代方案。我有什么明显的错误吗？

dayClick: function(date, allDay, jsEvent, view) { 
    $(this).qtip({ 

        content:"",
        overwrite: false,
        position: { corner: { target: 'topMiddle', tooltip: 'bottomMiddle' },
        viewport: $(window), // Keep it on-screen at all times if possible
        adjust: { x: 10, y: 10 } },
        show: { when: 'click', // Don't specify a show event
        ready: true // Show the tooltip when ready },
        hide: { when: 'click' },
        style: { 
        border: {  width: 5, radius: 10 }, 
        padding: 10, 
        textAlign: 'center', //tip: true, 
        // Give it a speech  bubble tip with automatic corner detection name: 'cream' 
        // Style it according to the preset  'cream' style } }); }

原文

I'm trying to learn qtip for fullcalendar but it doesnt seems to work. I´ve tried all tutorials/examples but nothing works as they say. I'm using the following code but I´ve tried many other alternatives. Am I doing any obvious fault?

dayClick: function(date, allDay, jsEvent, view) { 
    $(this).qtip({ 

        content:"",
        overwrite: false,
        position: { corner: { target: 'topMiddle', tooltip: 'bottomMiddle' },
        viewport: $(window), // Keep it on-screen at all times if possible
        adjust: { x: 10, y: 10 } },
        show: { when: 'click', // Don't specify a show event
        ready: true // Show the tooltip when ready },
        hide: { when: 'click' },
        style: { 
        border: {  width: 5, radius: 10 }, 
        padding: 10, 
        textAlign: 'center', //tip: true, 
        // Give it a speech  bubble tip with automatic corner detection name: 'cream' 
        // Style it according to the preset  'cream' style } }); }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一束光，穿透我孤独的魂 2024-12-29 21:07:37

我在 fullCalendar 应用程序中使用了 qTip，如下所示：

在 eventRender 中：

eventRender: function(event, element) {
    element.qtip({
                    content : [HTML SHOWING CONTENT],
                    position: {[position info]}
                    ... rest of settings...
                 });
    },

然后当我希望显示 qTip 时（对于我来说，在 eventMouseover 中）

eventMouseover: function(event) {
        jQuery(this).qtip();
    },
eventMouseout: function(event) {
        jQuery(this).qtip().hide();
    },

那就是.. 在 eventRender 中，使用 element.qtip 设置 qtip 并在 dayClick 中只需调用 $(this ).qtip() 函数。
不知道为什么我这样做，但它有效:)

I used qTip in my fullCalendar app like this:

In eventRender:

eventRender: function(event, element) {
    element.qtip({
                    content : [HTML SHOWING CONTENT],
                    position: {[position info]}
                    ... rest of settings...
                 });
    },

Then when i want the qTip to show (for me in eventMouseover)

eventMouseover: function(event) {
        jQuery(this).qtip();
    },
eventMouseout: function(event) {
        jQuery(this).qtip().hide();
    },

That is.. In eventRender, setup your qtip using element.qtip and in dayClick just call the $(this).qtip() function.
Not sure why I did it this way, but it works :)

回复收藏 0 原文

第七度阳光i 2024-12-29 21:07:37

确保文档头中链接了正确的 CSS 和 JS 文件。

  <head>
    <!-- STYLESHEETS //-->
      <link type="text/css" rel='stylesheet' href="style/jquery.qtip.min.css">

    <!-- JAVASCRIPTS //-->
      <script type="text/javascript" src="scripts/jquery.qtip.min.js"></script>
  </head>

一旦有了这些，如果将以下行添加到 eventRender 函数的顶部，

//Add the qtip to the eventRender function:
    element.qtip({ style: 'ui-tooltip-shadow ui-tooltip-jtools', content: event.description});

就像这样。

eventRender: function(event, element) {
//Add the qtip to the event when renered
element.qtip({ style: 'ui-tooltip-shadow ui-tooltip-jtools', content: event.description});

Make sure you have the correct CSS and JS file linked in your document head.

  <head>
    <!-- STYLESHEETS //-->
      <link type="text/css" rel='stylesheet' href="style/jquery.qtip.min.css">

    <!-- JAVASCRIPTS //-->
      <script type="text/javascript" src="scripts/jquery.qtip.min.js"></script>
  </head>

Once you have those, if you add the following line into the top of eventRender function

//Add the qtip to the eventRender function:
    element.qtip({ style: 'ui-tooltip-shadow ui-tooltip-jtools', content: event.description});

Like this.

eventRender: function(event, element) {
//Add the qtip to the event when renered
element.qtip({ style: 'ui-tooltip-shadow ui-tooltip-jtools', content: event.description});

回复收藏 0 原文

~没有更多了~