Всплывающая подсказка к ссылке (с произвольными свойствами)

[BituM]

Всем привет

 

Помогите пожалуйста решить проблему с созданием всплывающей подсказки

для ссылки. ВП эта должна быть  нужного мне размера, цвета, определенного позиционирования (то есть где будет «всплывать» - над, под ссылкой, справа или слева) + текст в ней тоже должен свободно форматироваться ( цвет, тип шрифта, возможно скриншот)

 

простенький title.

<a href="https://yadi.sk/d/9ZvR5g1XagZGJ" title="Сохранить  файл"><span style="font-size:19px;background-color:black;color:white;">«Я умею прыгать через лужи»</span></a>

не годится стало быть

Хоть и работает тег-то

 

Однако попытки (а их было МНОГо) использовать css ни к чем путному привели . Нужный мне результат так и не получился

 

ГДЕ же ошибки в кодах?

 

1

<a href="https://yadi.sk/d/9ZvR5g1XagZGJ"><div id="totlip" display:inline-block;position:relative  style="showTitle:hover:after ;content: attr(data-title);position: absolute;z-index: 1;font-family: Arial, sans-serif;padding: 5px 10px; font-size:18px;background-color:darkred;color:white; border:1px solid #fff; ">Сохранить файл<span style="font-size:18px;background-color:darkred;color:white;border: 1px solid #fff;">  «Я умею  прыгать через  лужи»  </span></a>

2

<a href="https://yadi.sk/d/qbhLcr71b6CqW" class="totlip"{display:inline-block;position:relative;}:hover::after {content: attr(data-text);"Сохранить" position:absolute;z-index:1;font-family:Arial,sans-serif;padding: 5px 10px;font-size:18px;background-color:darkred;color:white;border:4px solid #fff;}<span style="font-size:18px;background-color:darkblue;color:white;border:1px solid #fff;">  «Нашествие»  </span></a>

3

<a href="https://yadi.sk/d/9ZvR5g1XagZGJ"><DIV.HELP (width:155px;height:86px;background-color:indigo;color:white; border:1px solid #fff;position:absolute;{display:none;Ъсохранить</div><span style="font-size:18px;background-color:darkblue;color:white;border:1px solid #fff;">  «Воспоминания»(1963)  </span></a>

Ведь ни один не сработал

Огромная просьба не нужно «пулять» в меня ссылками с примерами  решения моей проблемы. Именно по аналогии с их содержимым я и конструировал свои коды.(может и нелепые но кто не был новичком?)

В идеале мне надо видеть перед глазами два кода полностью прописанных

Один мой неверный

Второй наоборот правильный

 

 

[Great Rash]

Use JavaScript, Luke!

[npofopr]

Use JavaScript, Luke!

Например http://qtip2.com/demos

style="showTitle:hover:after ;

откуда вы вообще такое берете? 

[BituM]

Например http://qtip2.com/demos

 

 

просил ведь насчет ссылок

[Bassline]

 

В идеале мне надо видеть перед глазами два кода полностью прописанных

Один мой неверный

Второй наоборот правильный

 

 

Нет никакого желания ковыряться в этой не читаемой каше

<DIV.HELP (width:155px;height:86px;background-color:indigo;color:white; border:1px solid #fff;position:absolute;{display:none;Ъсохранить</div>

И тем более что-то там полностью прописывать с различным вариантами.

 

Оформите вопрос и код по-человечески.

А еще лучше выучите основы, прежде чем начать делать всплывающие подсказки.

[swandev]

 

Например http://qtip2.com/demos

 

 

просил ведь насчет ссылок

 

Можно и на ссылку повесить. Читайте документацию или оформляйте более понятно вопрос если это совсем не то что нужно.

[Николя223]

Можно и на ссылку повесить. Читайте документацию или оформляйте более понятно вопрос если это совсем не то что нужно.

я не думал что ты тролль ))))))

 

Помогите пожалуйста решить проблему с созданием всплывающей подсказки для ссылки. ВП эта должна быть  нужного мне размера, цвета, определенного позиционирования (то есть где будет «всплывать» - над, под ссылкой, справа или слева) + текст в ней тоже должен свободно форматироваться ( цвет, тип шрифта, возможно скриншот)   простенький title.

 

Погуглите, есть много плагинов очень простых, которые  преобразуют Title в подсказки....

 

npofopr кстати такой и привел   http://qtip2.com/api   - читайте, там все просто

[Bassline]

Погуглите, есть много плагинов очень простых, которые преобразуют Title в подсказки....

 

Человек же попросил:

 

Огромная просьба не нужно «пулять» в меня ссылками с примерами решения моей проблемы.

В идеале мне надо видеть перед глазами два кода полностью прописанных

Edited September 10, 2014 by Bassline

[Николя223]

и я про тоже

)) но здесь я считаю самым лучшим вариантом пуление ссылки - там все прописано

[swandev]

Можно и на ссылку повесить. Читайте документацию или оформляйте более понятно вопрос если это совсем не то что нужно.

я не думал что ты тролль ))))))

 

Помогите пожалуйста решить проблему с созданием всплывающей подсказки для ссылки. ВП эта должна быть  нужного мне размера, цвета, определенного позиционирования (то есть где будет «всплывать» - над, под ссылкой, справа или слева) + текст в ней тоже должен свободно форматироваться ( цвет, тип шрифта, возможно скриншот)   простенький title.

 

Погуглите, есть много плагинов очень простых, которые  преобразуют Title в подсказки....

 

npofopr кстати такой и привел   http://qtip2.com/api   - читайте, там все просто

Не думаю что это троллинг))

[BituM]

Всем прЕбольшое спасибо! За конкретную ( с примерами) помощь, понимание,

отсутствие едкой критики, необоснованной и юмора черного.

 

 

[BituM]

http://www.xiper.net/collect/html-and-css-tricks/content/css3-tooltips

<a href="#" class="tooltip"> your text <span>Your tooltip description</span></a>

попытка все сделать как в материале только со своей ссылкой

 

шаг 1

<a href="https://yadi.sk/d/EWSoCxZWbRE44" class="tooltip"> Сохранить<span>Герадот «История»</span></a>

шаг 2

<a href="https://yadi.sk/d/EWSoCxZWbRE44"title="Сохранить">Герадот «История»</a>

шаг 3

<a href="https://yadi.sk/d/EWSoCxZWbRE44"data-title="Сохранить">Герадот «История»</a>

до сих пор все понятно

а вот дальше…..

.tooltip:hover:before {    content: attr(data-title);          /* дальше идет просто оформление */}

Откуда опять взялся totlip  и пр.?

Если мы от него только ушли?

 

 

Встраивать его в понятный html код как?

Так?

<a href="https://yadi.sk/d/EWSoCxZWbRE44".tooltip:hover:before {content: attr(data-title="Сохранить" );Герадот «История»</a>

Или так?

<a href="https://yadi.sk/d/EWSoCxZWbRE44".tooltip:hover:before {content: attr(data-title="Сохранить" );position: absolute;bottom: 30px;left: 50%;z-index: 999;width: 230px;;padding: 10px;border: 2px solid white;opacity:.9;background-color: darkred;color:white;}Герадот «История»</a>

Разметка того…не рабочая совсем

Но вот как правильно?

[Great Rash]

http://codepen.io/GreatRash/pen/Cujkf

[BituM]

http://codepen.io/GreatRash/pen/Cujkf

 

Лык мачало – начинай сначала

<a href="https://yadi.sk/d/EWSoCxZWbRE44"data-tooltip="Сохранить">Герадот «История»</a>

так?

дальше

<a {display:inline-block;position:relative;}href="https://yadi.sk/d/EWSoCxZWbRE44"data-tooltip="Сохранить">Герадот «История»</a>

почему дата-тоолтип в скобках оказывается?

Откуда еще одна а перед hover? И точка

 

продолжение

<a {display:inline-block;position:relative;}href="https://yadi.sk/d/EWSoCxZWbRE44"hover:after {content: attr(data- tooltip="Сохранить");position:absolute;top:0;left:100%;margim:0 0 0 5px;padding:0 5px; white-space:nowrap;text-decoration;none; border: 2px solid white;background-color:darkred;color:white;}Герадот «История»</a>

Есес-но результат ошибка

 

 

 

 

 

 

 

 

 

 

 

[Great Rash]

У меня к вам вопрос: вы для чего белым цветом пишете? У меня на белом фоне не видать нифига.

И ещё один вдогонку: чо вам надо то? Объясните толком.

[swandev]

http://codepen.io/GreatRash/pen/Cujkf

 

Лык мачало – начинай сначала

<a href="https://yadi.sk/d/EWSoCxZWbRE44"data-tooltip="Сохранить">Герадот «История»</a>

так?

дальше

<a {display:inline-block;position:relative;}href="https://yadi.sk/d/EWSoCxZWbRE44"data-tooltip="Сохранить">Герадот «История»</a>

почему дата-тоолтип в скобках оказывается?

Откуда еще одна а перед hover? И точка

 

продолжение

<a {display:inline-block;position:relative;}href="https://yadi.sk/d/EWSoCxZWbRE44"hover:after {content: attr(data- tooltip="Сохранить");position:absolute;top:0;left:100%;margim:0 0 0 5px;padding:0 5px; white-space:nowrap;text-decoration;none; border: 2px solid white;background-color:darkred;color:white;}Герадот «История»</a>

Есес-но результат ошибка

Несмотря на то что вам уже привели рабочие примеры, потратил несколько секунд на гугл

 

http://webdesign.tutsplus.com/articles/how-to-create-script-free-css3-tooltips--webdesign-3322

http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

[Great Rash]

Проскочила у меня мысль, что ТС просто не догоняет, что CSS в тэг пихать не нужно. Другого объяснения той каше из кода, которую он приводит, я не вижу.

[npofopr]

CSS в тэг пихать не нужно

делает он это весьма извращенно. 

[BituM]

Если не css в html встраивать

("пихать" по вашему) то как тогда?

За белый цвет шрифта  pardon

 

 

[sigma77]

Если не css в html встраивать ("пихать" по вашему) то как тогда?

http://htmlbook.ru/samcss/sposoby-dobavleniya-stiley-na-stranitsu

[BituM]

Не по-ни-ма-ю

все равно

[Great Rash]

Значит это не ваше. Найдите того, кто понимает, заплатите ему денег и он вам всё сделает. Дальше разжёвывать что-то просто бессмысленно ибо проще уже некуда.

[Николя223]

Если уж над кодом извращаться, то хотя бы так 

http://codepen.io/anon/pen/qDLtw

[BituM]

Значит это не ваше. Найдите того, кто понимает, заплатите ему денег и он вам всё сделает. Дальше разжёвывать что-то просто бессмысленно ибо проще уже некуда.

 

в ЧЕМ ГЛАВНАЯ МОЯ ТРУДНОСТЬ

Я не   пойму как оба этих куска кода:

1 Ссылка с самоназванием

2 блок с описаниеМ св-в всплывающей подсказки

Соединить в одно целое?

В какой последоватеьности?

Что куда встраивается?

Что после чего идет?

[Great Rash]

Вам дали ссылку на страницу, где как раз написано как связать воедино ссылку и код, который отвечает за её работу. Продублирую ещё раз: http://htmlbook.ru/samcss/sposoby-dobavleniya-stiley-na-stranitsu