FLOT Подсказка?

Question

Похоже, что в моем графике нет способа отодвинуть всплывающую подсказку вверху справа внизу? Это кажется очень интуитивным, но я не могу найти способ поместить его выше или слева от точки данных. Какие-либо предложения? Спасибо

Я думал, что изменение верхнего / нижнего, левого / правого в функции сделает это, но не повезло

code

function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                bottom:  y - 35,
                left:  x + 10,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
         }

code

Answer 1

Используя ваш синтаксис, это выглядит как комбинация сверху и слева , поместите его довольно хорошо (отказ от ответственности, у меня есть только Firefox под рукой, чтобы попробовать это).

   function showTooltip(x, y, contents) {
       $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top:  y - 40,
            left:  x - 100,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);

   }

Answer 2

Вы должны использовать плагин Craig qTip 2, чтобы получить более удобную подсказку и (я почти уверен) возможность перемещать подсказку туда, куда вы хотите, из точки.Здесь вы можете найти пример: http://craigsworks.com/projects/qtip2/demos/flot и ссылка lowwing приведет вас на всю страницу удивительного плагина http://craigsworks.com/projects/qtip2/demos/

Это код, использованный в опубликованном примере, возможно, он может быть полезен дляВаша цель ...

// Create a tooltip on our chart
elem.qtip({
    prerender: true,
    content: 'Loading...', // Use a loading message primarily
    position: {
        viewport: $(window), // Keep it visible within the window if possible
        target: 'mouse', // Position it in relation to the mouse
        adjust: { x: 7 } // ...but adjust it a bit so it doesn't overlap it.
    },
    show: false, // We'll show it programatically, so no show event is needed
    style: {
        classes: 'ui-tooltip-shadow ui-tooltip-tipsy',
        tip: false // Remove the default tip.
    }
});

Я изучаю множество практических приложений Flot, поэтому мы должны держать себя в курсе, так как у этого плагина нет отличного руководства.