Размещение всплывающей подсказки FLOT?

#jquery #html #date #time #flot

#jquery #HTML #Дата #время #flot

Вопрос:

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

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

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

введите описание изображения здесь

1. У меня работает приведенный ниже пример всплывающей подсказки, но не решается проблема с размещением всплывающей подсказки над точкой данных и слева … есть идеи? people.iola.dk/olau/flot/examples/interacting.html

Ответ №1:

Используя ваш синтаксис, похоже, что комбинация top и left размещает ее довольно хорошо (отказ от ответственности, у меня есть только 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);

   }

введите описание изображения здесь

1. Спасибо за справку Отметьте — возможно, это браузер, потому что в IE 8 он так не работает.

2. Прошу прощения, Марк — это действительно работает в IE. По какой-то причине, когда я изменил это на всех четырех графиках, это сработало. Не уверен, что происходит, но спасибо!

Ответ №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, поэтому мы должны держать себя в курсе, поскольку в этом плагине нет хорошего руководства.