Jump to content
  • 0

Ширина всплывающего элемента


Phoenix1394
 Share

Question

Доброго времени суток, уважаемые форумчаны! :)

Как выглядит?

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

Вот пример в картинках:

csij.png

Наводим курсор мыши на слово "Что0000000000jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj0?" и получаем следующее:

csi2.png

Как видно - всплывающее окно текста сжимается и ширина его соответствует этой фразе-родителю.

Если фраза "Что0000000000jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj0?" будет, например, "Что?", то окно подсказки вообще сожмётся до самого длинного слова в этой подсказке.

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

Как работает?

Работает это на jquery с таким кодом. Код же самой подсказки у меня такой:

<span class="bbc_bubble"><span class="bbc_bubble_trigger">{{{title}}}</span><span class="bbc_bubble_popup">{{{content}}}</span></span>

где {{{title}}} - это фраза-родитель, а {{{content}}} - информация для выведения в всплывающей подсказке.

CSS такой:

/* Bubble */
#bodyContent span.bbc_bubble {
position: relative;

}
#bodyContent span.bbc_bubble_trigger {}
#bodyContent span.bbc_bubble_popup {
position: absolute;
display: none;
border: 1px solid #c4c4c4;
background: #fff;
padding: 10px 20px;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: 0 0 3px 1px #c8c8c8;
-moz-box-shadow: 0 0 3px 1px #c8c8c8;
-webkit-box-shadow: 0 0 3px 1px #c8c8c8;
z-index: 100;
}

Перепробовал я многое. Например, заменял SPAN на DIV и приписывал ему свойство inline-block - так как фраза должна находится в тексте. Если просто поставить DIV, то будет всё нормально работать, но при этом фраза всегда будет начинаться с новой строки (ну это понятно, DIV же - блочный элемент) И ничего не помогает :)

Скажите пожалуйста, вообще возможно сделать то, что я хочу? :)

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy