Перейти к содержимому



Подсказка на слово (десктоп + мобильные устройства)

#1 Sosnovskij
Sosnovskij
  • Администратор
  • 5 277 сообщений
  • Репутация: 799
0

Отправлено 09 Август 2019 - 10:55

Привет! Задача - на текст (одно слово) необходимо добавить подсказку. Просьба подсказать код и стили.

 

1-min.png

 

При клике или тапе на слово появляется подсказка.

 

2-min.png

 

После повторного клика/тапа подсказка убирается.

 

В ней можно добавить маркированный список или переносы строк.

 

Тег title в рамках <a> не подходит - не виден на мобильных устройствах.

 

Вывод необходим через пост в wordress, но думаю, что это не принципиально :)


 

 

  • 0

:excl: Требуется линкбилдер: браузер + Excel. Сдельная оплата + бонусы. Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



#2 Андрей WPM
Андрей WPM
  • Модератор
  • 968 сообщений
  • Репутация: 143

Отправлено 09 Август 2019 - 12:02

@Sosnovskij, Серёж, а тебе принципиально нужен самопис? Я для этого плагином пользуюсь Shortcodes Ultimate. Если вдруг никто не предложит что-то лучше. Там много прикольных фишек есть.


  • 0


#3 Sosnovskij
Sosnovskij
    Topic Starter
  • Администратор
  • 5 277 сообщений
  • Репутация: 799

Отправлено 09 Август 2019 - 13:24

@Андрей WPM, нужно только на одной странице и на одно слово :)


  • 0

:excl: Требуется линкбилдер: браузер + Excel. Сдельная оплата + бонусы. Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



#4 Андрей WPM
Андрей WPM
  • Модератор
  • 968 сообщений
  • Репутация: 143

Отправлено 09 Август 2019 - 13:56

@Sosnovskij, Серёж, со стилями придется тебе самому позаморачиваться. У меня сейчас заказ, не особо время есть экспериментировать. Демо.


  • 1


#5 Sosnovskij
Sosnovskij
    Topic Starter
  • Администратор
  • 5 277 сообщений
  • Репутация: 799

Отправлено 09 Август 2019 - 15:54

@Андрей WPM, большое спасибо  :friends: ! Протестирую на днях. Отпишусь по результату.

Подскажи, пожалуйста, как js соединить с html/CSS? Отдельный js-файл создавать в теме?


  • 0

:excl: Требуется линкбилдер: браузер + Excel. Сдельная оплата + бонусы. Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



#6 Андрей WPM
Андрей WPM
  • Модератор
  • 968 сообщений
  • Репутация: 143

Отправлено 09 Август 2019 - 17:32

Подскажи, пожалуйста, как js соединить с html/CSS? Отдельный js-файл создавать в теме?
 

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

<script>
тут код
</script>

или где нибудь в конце страницы нужной. Только не в футер.пхп  :D А то по всему сайту будет подключаться. Тот код зависит от библиотеки jQuery имей ввиду, это не чистый javascript. 


  • 0


#7 Sosnovskij
Sosnovskij
    Topic Starter
  • Администратор
  • 5 277 сообщений
  • Репутация: 799

Отправлено 13 Август 2019 - 08:39

@Андрей WPM, html и js добавил на страницу через вкладку "Текст".


<script>
$('.sp').on('click', function(){
  $('.hid_p').toggleClass('active');
});
</script>
<div class="cont">
<p class="bas_p">Какой-то текст и <span class="sp">нужное</span> слово.</p>
<p class="hid_p">Подсказка, которая будет скрыта по умолчанию и активированна по клику</p>
</div>

CSS добавил в существующий файл стилей. 

 

Единственное, не добавлял body (он уже есть в файле стилей с margin: 0;).

 

На выходе выглядит так https://take.ms/UYN6l :) В коде страницы скрипт появляется https://take.ms/5NlpW

 

Что не так сделал? :)


  • 0

:excl: Требуется линкбилдер: браузер + Excel. Сдельная оплата + бонусы. Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



#8 Андрей WPM
Андрей WPM
  • Модератор
  • 968 сообщений
  • Репутация: 143

Отправлено 13 Август 2019 - 08:58

@Sosnovskij, а jQuery точно подключен на сайте? И Серёж, в примере нужное слово пунктиром подчеркнуто у меня, а у тебя на скрине нет. Такое ощущение что стили не подключились. Кэш сбрасывал?

Да, точно стили не подключились, иначе подсказка должна быть display:none; а у тебя она показывается на скрине. Попробуй стили прям в редакторе после <div class="cont"> в теге <style>...</style> поставить, а не в общий style.css.


  • 0


#9 Андрей WPM
Андрей WPM
  • Модератор
  • 968 сообщений
  • Репутация: 143

Отправлено 13 Август 2019 - 09:26

Я ещё js маленько поправил, попробуй с новым, с этим вариантом должно быть пофиг где скрипт по дереву расположен будет, по идеи.


  • 0


#10 Sosnovskij
Sosnovskij
    Topic Starter
  • Администратор
  • 5 277 сообщений
  • Репутация: 799

Отправлено 13 Август 2019 - 15:59

@Андрей WPM, супер, заработало. Большое спасибо  :smile-thumb-up: !


  • 0

:excl: Требуется линкбилдер: браузер + Excel. Сдельная оплата + бонусы. Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
BLIK BLIK 1-й за Ноябрь
Очков активности: 672 0 тем, 32 сообщения, 14 баллов репутации
ТОП самых активных за этот месяц
  • Фотография BLIK
    #1

    BLIK
    Очков активности: 63 Вне конкурса за определение пользователя месяца

  • Фотография Vmir
    #2

    Vmir
    Очков активности: 48 1 тема, 13 сообщений, 2 балла репутации

  • Фотография Victim
    #3

    Victim
    Очков активности: 31.5 0 тем, 7 сообщений, 3 балла репутации

  • Фотография FIvYUr
    #4

    FIvYUr (moy-evroopt.ru)
    Очков активности: 15 0 тем, 10 сообщений, 1 балл репутации

  • Фотография kolver
    #5

    kolver
    Очков активности: 15 1 тема, 7 сообщений, 1 балл репутации

  • Фотография Rodiola
    #6

    Rodiola (rukodelkovo.ru)
    Очков активности: 15 Вне конкурса за определение пользователя месяца

  • Фотография akmid81
    #7

    akmid81 (biznessystem.ru)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Фотография NataliaAntalia
    #8

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 10.5 Вне конкурса за определение пользователя месяца

  • Фотография MattCutts
    #9

    MattCutts (dmitrylee.ru)
    Очков активности: 10.5 Вне конкурса за определение пользователя месяца

  • Фотография morvad24
    #10

    morvad24
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.11.2019
  • Яндекс выдача: 11.12.2019
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru