Tooltip с заданной позицией

10 views
Skip to first unread message

Avol

unread,
Sep 17, 2011, 9:53:41 AM9/17/11
to RightJS Для Бородатых Хакеров
У тултипа есть возможность указать, что он не должен следовать за
курсором (move:false), но нет возможности указать, где его показывать,
кроме как через стиль для всех тултипов.
Для себя решил эту проблему, добавив возможность объект, относительно
которого тултип будет появляться.

Т.е. имеется элемент с тултипом:
<span data-tooltip="{move:false,placeholder:'tooltip_placeholder'}"
title="Tooltip text">text</span>

И специальный элемент, вроде:
<div id="tooltip_placeholder" style="display: none; position:
absolute; left: 0; top: 0; width: 100%; height: 100%;"></div>

Тултип будет появляться относительно центра этого объекта и будет
ограничен его размерами.

Модификации:
Добавление опции, позволяющей указать элемент:
var Tooltip = new Widget({
...
Options: {
...
placeholder: null,

Инициализация:
initialize: function(element, options) {
...
между "adding the ID if needed" и "removing the titles from the
elment":
if (this.options.placeholder) {
this.options.placeholder = $(this.options.placeholder);
if ( this.options.placeholder )
{
this.options.placeholder.hide();
this.addClass('rui-tooltip-fixed');
}
else
{
this.options.placeholder = null;
}
}

Отображение:
show: function(immediately) {
...
между "hidding all the others" и "show the tooltip with a delay":
var dims,
dims2,
offset;

if ( this.options.placeholder )
{
this.options.placeholder.show();
dims = this.options.placeholder.dimensions();
this.options.placeholder.hide();

this.setStyle({
'left': dims.left.floor() + 'px',
'top': dims.top.floor() + 'px',
'position': 'absolute'
});

if ( dims.width > 0 )
{
this.setStyle( 'max-width', dims.width.floor() + 'px' );
}
if ( dims.height > 0 )
{
this.setStyle( 'max-height', dims.height.floor() + 'px' );
}

this.setStyle({
'display': 'block',
'visibility': 'hidden'
});
dims2 = this.size();
this.setStyle({
'display': 'none',
'visibility': 'visible'
});

if ( dims2.x < dims.width )
{
offset = Math.floor( dims.width / 2 - dims2.x / 2 );
this.setStyle( 'left', (dims.left.floor() + offset) + 'px' );
}
if ( dims2.y < dims.height )
{
offset = Math.floor( dims.height / 2 - dims2.y / 2 );
this.setStyle( 'top', (dims.top.floor() + offset) + 'px' );
}
}

Решение, конечно, грубовато, но для моей ситуации работает неплохо.

Reply all
Reply to author
Forward
0 new messages