Создаем простой tooltip (подсказка)

baltun · 4 Февраль 2016

Пользователь xsasha разместил новый ресурс:

Создаем простой tooltip (подсказка) - Создаем простой tooltip.

Код:
Добавляем в нужный нам шаблон следующую разметку:

Код:

<span class="tooltip" data-tooltip="Тут будет наша подсказка">Наша информация</span>

Описываем CSS для подсказки:

Код:

.tooltip { border-bottom: 1px dotted #0077AA; cursor: help; } .tooltip::after { background: rgba(0, 0, 0, 0.8); border-radius: 8px 8px 8px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #FFF; content: attr(data-tooltip); margin-top: -24px; opacity: 0; padding:...

Узнать больше об этом ресурсе...

Роман_Тютин · 19 Октябрь 2016

Привет, подскажите а можно так прикрутить для кнопки скачать в менеджере ресурсов, в какой шаблон нужно вставить код ?

baltun · 19 Октябрь 2016

Я выводил в этом шаблоне, как работает можно посмотреть на платных ресурсах. Пример:https://web-zones.ru/resources/hal-socialnye-knopki-animacii.461/ наведите мышь на кнопку купить увидите, css соответственно можно добавить в EXTRA.CSS

Роман_Тютин · 19 Октябрь 2016

xsasha сказал(а):
наведите на мышь на кнопку купить увидите

не чего не происходит

Halk · 19 Октябрь 2016

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

Роман_Тютин · 19 Октябрь 2016

так по порядку, нужно что бы когда при наведение мыши на кнопку скачать в менеджере ресурсов выскакивала подсказка с моим текстом, у меня установлен плагин AD.Credits, он не будет помехой ?

Halk · 19 Октябрь 2016

Если не вносит изменения в данный шаблон то нет.

Роман_Тютин · 19 Октябрь 2016

подскажите в какой шаблон мне установить этот код ?

Halk · 19 Октябрь 2016

Вот шаблон где выводится данная кнопка resource_view_header сюда добавляется html код, а для css шаблон написан выше.

Роман_Тютин · 19 Октябрь 2016

спасибо сейчас попробую установить, я так понимаю что в данном шаблоне нужно в какое то определённое место установить код ?

<xen:require css="resource_view_header.css" />

<div class="resourceInfo">
<xen:hook name="resource_view_header_info">
<xen:if hascontent="true">
<ul class="primaryLinks {xen:if '{$resource.is_fileless} AND !{$resource.external_purchase_url}', noButton}">
<xen:contentcheck>
<xen:if is="{$resource.external_purchase_url}">
<xen:if is="!{$resource.canDownload}">
<li><label class="downloadButton downloadDisabled">
<span class="inner">
{xen:phrase buy_now_for_x, 'cost={$resource.cost}'}
<small class="minorText">{xen:phrase not_available}</small>
</span>
</label></li>
<xen:else />
<li><label class="downloadButton purchase">
<a href="{$resource.external_purchase_url}" class="inner">
{xen:phrase buy_now_for_x, 'cost={$resource.cost}'}
<span class="tooltip" data-tooltip="Тут будет наша подсказка">Наша информация</span>
</a>
</label></li>
</xen:if>
<xen:elseif is="!{$resource.is_fileless}" />
<li><label class="downloadButton {xen:if '!{$resource.canDownload}', downloadDisabled}">
<a href="{xen:link resources/download, $resource, 'version={$resource.current_version_id}'}" class="inner">
<xen:if is="{$resource.canDownload}">{xen:phrase download_now}<xen:else />{xen:phrase download_not_available}</xen:if>
<xen:if is="{$resource.download_url}">
<small class="minorText">{xen:phrase via_external_site}</small>
<xen:else />
<small class="minorText">{xen:number $resource.attachment.file_size, 'size'} .{$resource.attachment.extension}</small>
</xen:if>
</a>
</label></li>
</xen:if>

<xen:hook name="resource_view_header_after_resource_buttons" />
</xen:contentcheck>
</ul>
</xen:if>

<div class="resourceImage">
<xen:if is="{$xenOptions.resourceAllowIcons}">
<img src="{xen:helper resourceiconurl, $resource}" alt="" class="resourceIcon" />
<xen:else />
<xen:avatar user="$resource" size="s" img="true" />
</xen:if>
</div>

<h1><xen:if is="{$titleHtml} AND {$titleHtml} != {xen:escape $resource.title}">{xen:raw $titleHtml}<xen:else />{xen:helper resourcePrefix, $resource}{$resource.title}</xen:if> <xen:if is="!{$resource.isFilelessNoExternal}"><span class="muted">{$resource.version_string}</span></xen:if></h1>
<xen:if is="{$resource.tag_line} OR {$extraDescriptionHtml}"><p class="tagLine muted">{$resource.tag_line}<xen:if is="{$resource.tag_line} AND {$extraDescriptionHtml}"><br /></xen:if>{xen:raw $extraDescriptionHtml}</p></xen:if>
</xen:hook>
</div>

<xen:hook name="resource_view_header_after_info" />

<xen:if is="{$resource.resource_state} != 'visible'">
<ul class="secondaryContent resourceAlerts">
<xen:if is="{$resource.resource_state} == 'deleted'">
<li class="deletedAlert">
<span class="icon"></span>
{xen:phrase this_resource_has_been_deleted}
<xen:if is="{$resource.delete_user_id}">
{xen:phrase deleted_by_x, 'name={xen:helper username, {xen:array "user_id={$resource.delete_user_id}", "username={$resource.delete_username}"}}'}, <xen:datetime time="{$resource.delete_date}" /><xen:if is="{$resource.delete_reason}">, {xen:phrase reason}: {$resource.delete_reason}</xen:if>.
</xen:if>
</li>
</xen:if>
<xen:if is="{$resource.resource_state} == 'moderated'">
<li class="moderatedAlert">
<span class="icon"></span>
{xen:phrase this_resource_is_currently_awaiting_approval}
</li>
</xen:if>
</ul>
</xen:if>

правильно установил ? , извините я не силён в коде

это же не полный код ?

Код:

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip);
    margin-top: -24px;
    opacity: 0;
    padding:...

baltun · 20 Октябрь 2016

Все не так просто как вы думаете добавил код и все, но если вы разбиретесь я напишу.
1. Добавляем класс для подсказки, можно в том же шаблоне (resource_view_header) где будете ее выводить.

Код:

<script>
                    $(".primaryLinks .downloadButton .inner").addClass("tooltips");
</script>

2. Добавляем сам текст с подсказкой в шаблоне resource_view_header.
Найти:
{xen:phrase download_now}
Заменить:

Код:

{xen:phrase download_now}<span>Тут ваша подсказка</span>

3. Выводим CSS для подсказки:

Код:

a.tooltips {
    position: relative;
    display: inline;
}
a.tooltips span {
    position: absolute;
    width: 150px;
    color: #FFFFFF;
    background: #000000;
    height: 30px;
    line-height: 30px;
    text-align: center;
    visibility: hidden;
    border-radius: 6px;
}
a.tooltips span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid #000000;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
    visibility: visible;
    opacity: 0.8;
    right: 100%;
    top: 50%;
    margin-top: -15px;
    margin-right: 15px;
    z-index: 999;
}

Пример работы данного кода показан выше по ссылки.

Роман_Тютин · 20 Октябрь 2016

Спасибо, сейчас на работе , вечером попробую установить

пример который вы указали

xsasha сказал(а):
Пример:https://web-zones.ru/resources/hal-socialnye-knopki-animacii.461/ наведите мышь на кнопку купить увидите,

при наведение не чего не происходит, видно потому что я не в группе местные, я вчера пожертвовал сайту 105 рублей но пока что так и не перешёл в данную группу , мой email с которого переводил деньги

разные места в шаблоне перепробовал , все равно нет подсказки, ну подскажите пожалуйста куда вставить этот код

Код:

<script>
                    $(".primaryLinks .downloadButton .inner").addClass("tooltips");
</script>

в шаблоне что бы при наведение на кнопку скачать выскакивала подсказка, вот мой шаблон

<xen:require css="resource_view_header.css" />

<div class="resourceInfo">
<xen:hook name="resource_view_header_info">
<xen:if hascontent="true">
<ul class="primaryLinks {xen:if '{$resource.is_fileless} AND !{$resource.external_purchase_url}', noButton}">
<xen:contentcheck>
<xen:if is="{$resource.external_purchase_url}">
<xen:if is="!{$resource.canDownload}">
<li><label class="downloadButton downloadDisabled">
<span class="inner">
{xen:phrase buy_now_for_x, 'cost={$resource.cost}'}<span>Тут ваша подсказка</span>
<small class="minorText">{xen:phrase not_available}</small>
</span>

</label></li>
<xen:else />
<li><label class="downloadButton purchase">

<a href="{$resource.external_purchase_url}" class="inner">
{xen:phrase buy_now_for_x, 'cost={$resource.cost}'}<span>Тут ваша подсказка</span>

</a>
</label></li>
</xen:if>
<xen:elseif is="!{$resource.is_fileless}" />
<li><label class="downloadButton {xen:if '!{$resource.canDownload}', downloadDisabled}">
<a href="{xen:link resources/download, $resource, 'version={$resource.current_version_id}'}" class="inner">
<xen:if is="{$resource.canDownload}">{xen:phrase download_now}<xen:else />{xen:phrase download_not_available}</xen:if>
<xen:if is="{$resource.download_url}">
<small class="minorText">{xen:phrase via_external_site}</small>
<xen:else />
<small class="minorText">{xen:number $resource.attachment.file_size, 'size'} .{$resource.attachment.extension}</small>
</xen:if>
</a>
</label></li>
</xen:if>

<xen:hook name="resource_view_header_after_resource_buttons" />
</xen:contentcheck>
</ul>
</xen:if>

<div class="resourceImage">
<xen:if is="{$xenOptions.resourceAllowIcons}">
<img src="{xen:helper resourceiconurl, $resource}" alt="" class="resourceIcon" />
<xen:else />
<xen:avatar user="$resource" size="s" img="true" />
</xen:if>
</div>

<h1><xen:if is="{$titleHtml} AND {$titleHtml} != {xen:escape $resource.title}">{xen:raw $titleHtml}<xen:else />{xen:helper resourcePrefix, $resource}{$resource.title}</xen:if> <xen:if is="!{$resource.isFilelessNoExternal}"><span class="muted">{$resource.version_string}</span></xen:if></h1>
<xen:if is="{$resource.tag_line} OR {$extraDescriptionHtml}"><p class="tagLine muted">{$resource.tag_line}<xen:if is="{$resource.tag_line} AND {$extraDescriptionHtml}"><br /></xen:if>{xen:raw $extraDescriptionHtml}</p></xen:if>
</xen:hook>
</div>

<xen:hook name="resource_view_header_after_info" />

<xen:if is="{$resource.resource_state} != 'visible'">
<ul class="secondaryContent resourceAlerts">
<xen:if is="{$resource.resource_state} == 'deleted'">
<li class="deletedAlert">
<span class="icon"></span>
{xen:phrase this_resource_has_been_deleted}
<xen:if is="{$resource.delete_user_id}">
{xen:phrase deleted_by_x, 'name={xen:helper username, {xen:array "user_id={$resource.delete_user_id}", "username={$resource.delete_username}"}}'}, <xen:datetime time="{$resource.delete_date}" /><xen:if is="{$resource.delete_reason}">, {xen:phrase reason}: {$resource.delete_reason}</xen:if>.
</xen:if>
</li>
</xen:if>
<xen:if is="{$resource.resource_state} == 'moderated'">
<li class="moderatedAlert">
<span class="icon"></span>
{xen:phrase this_resource_is_currently_awaiting_approval}
</li>
</xen:if>
</ul>
</xen:if>

спасибо

baltun · 21 Октябрь 2016

Вот роман собрал тебе как дополнение, чтобы ты посмотрел как все сделано, все в одной модификации шаблона, как и писал выше нечего нового, надеюсь тебе это поможет, дополнение должно работать сразу для всех кнопок в МР.

Роман_Тютин · 22 Октябрь 2016

Спасибо огромнейшее, вечером попробую

установил не работает :no2:

в списке дополнений имеется плагин Роман_Тютин (Подсказка) 1.0 , может AD.Credits мешает, не пойму что не так, вот скрины

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

baltun · 23 Октябрь 2016

У тебя модификация не выполнилась, попробуй поставить порядок выполнения 5 у этого мода, зачем делать за денежку, если я тебе и так его сделал. Если не получится с порядком, тогда нужен доступ к админке посмотреть модификации, возможно какой то плагин изменил, что то в данном шаблоне. Данные в ЛС, смогу посмотреть в понедельник.

Роман_Тютин · 28 Октябрь 2016

Извините, очень много работы навалилось не мог зайти к Вам на форум, завтра обязательно попробую поставить порядок выполнения 5, а плагин который мешает у меня я думаю AD.Credits

не могу поменять порядок выполнения на 5 , выделяется но не пишется 5

baltun · 29 Октябрь 2016

Для того, чтобы делать какие либо изменения требуется включить режим разработчика с помощью например данного плагина: https://web-zones.ru/resources/enable-debug-mode-from-admincp.158/

Роман_Тютин · 29 Октябрь 2016

Громаднейшее спасибо :yahoo:

все заработало, вечером полностью протестирую, но думаю всё отлично будет , спасибо

есть не большая не со стыковка , это из за плагина AD.Credits, после включения подсказки становиться не доступным кнопка скачать

после включения подсказки

baltun · 29 Октябрь 2016

Требуется доступ к ресурсу ЛС надо смотреть какие вносит изменения этот плагин к кнопки скачать возможно дописывает свои классы или еще что, доступ к админке не нужен, только ресурс чтобы посмотреть все.
Поправил, этот должен подойти.

Роман_Тютин · 25 Октябрь 2017

Привет, ух долго я мучился что бы понять как это работает, но на конец то дошло до меня, теперь подскажите пожалуйста как сделать такой кончик выпирающий

, хочу его сюда внизу по середине

, а то без него как то не законченная картина получается :grin:

Создаем простой tooltip (подсказка)

baltun

Роман_Тютин

baltun

Роман_Тютин

Halk

Роман_Тютин

Halk

Роман_Тютин

Halk

Роман_Тютин

baltun

Роман_Тютин

baltun

Вложения

Роман_Тютин

baltun

Роман_Тютин

baltun

Роман_Тютин

baltun

Вложения

Роман_Тютин