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



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

#1 Sosnovskij
Sosnovskij
  • Пользователь PRO
  • 5 460 сообщений
  • Репутация: 835
0

Обновлено 13 августа 2019 - 15:59  Отправлено 09 августа 2019 - 10:55

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

 

1-min.png

 

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

 

2-min.png

 

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

 

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

 

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

 

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


 

 

  • 0

Блог — https://sosnovskij.ru/. Добавить меня в TelegramМАГАЗИН MASTERWEBS И ПОЛЬЗОВАТЕЛЬ МЕСЯЦА ВРЕМЕННО НЕ РАБОТАЮТ.



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

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

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


  • 0

Промокоды для вебмастеров (скидки от 1 до 15%). | Оптимизацией временно не занимаюсь!



#3 Sosnovskij
Sosnovskij
    Topic Starter
  • Пользователь PRO
  • 5 460 сообщений
  • Репутация: 835

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

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


  • 0

Блог — https://sosnovskij.ru/. Добавить меня в TelegramМАГАЗИН MASTERWEBS И ПОЛЬЗОВАТЕЛЬ МЕСЯЦА ВРЕМЕННО НЕ РАБОТАЮТ.



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

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

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


  • 1

Промокоды для вебмастеров (скидки от 1 до 15%). | Оптимизацией временно не занимаюсь!



#5 Sosnovskij
Sosnovskij
    Topic Starter
  • Пользователь PRO
  • 5 460 сообщений
  • Репутация: 835

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

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

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


  • 0

Блог — https://sosnovskij.ru/. Добавить меня в TelegramМАГАЗИН MASTERWEBS И ПОЛЬЗОВАТЕЛЬ МЕСЯЦА ВРЕМЕННО НЕ РАБОТАЮТ.



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

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

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

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

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

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


  • 0

Промокоды для вебмастеров (скидки от 1 до 15%). | Оптимизацией временно не занимаюсь!



#7 Sosnovskij
Sosnovskij
    Topic Starter
  • Пользователь PRO
  • 5 460 сообщений
  • Репутация: 835

Отправлено 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

Блог — https://sosnovskij.ru/. Добавить меня в TelegramМАГАЗИН MASTERWEBS И ПОЛЬЗОВАТЕЛЬ МЕСЯЦА ВРЕМЕННО НЕ РАБОТАЮТ.



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

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

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

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


  • 0

Промокоды для вебмастеров (скидки от 1 до 15%). | Оптимизацией временно не занимаюсь!



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

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

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


  • 0

Промокоды для вебмастеров (скидки от 1 до 15%). | Оптимизацией временно не занимаюсь!



#10 Sosnovskij
Sosnovskij
    Topic Starter
  • Пользователь PRO
  • 5 460 сообщений
  • Репутация: 835

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

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


  • 0

Блог — https://sosnovskij.ru/. Добавить меня в TelegramМАГАЗИН MASTERWEBS И ПОЛЬЗОВАТЕЛЬ МЕСЯЦА ВРЕМЕННО НЕ РАБОТАЮТ.



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


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

Пользователь месяца
BLIK BLIK 1-й за Июль
Очков активности: 81 0 тем, 27 сообщений, 2 балла репутации
ТОП самых активных за этот месяц
  • Фотография sws
    #1

    sws
    Очков активности: 6 0 тем, 4 сообщения, 1 балл репутации

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

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

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

    Chaser (majento.ru)
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

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

    kuprum
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

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

    Cpatoday
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

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

    kartuzzz
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

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

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

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

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

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

    Megoydagi (24ho.ru)
    Очков активности: 1.5 0 тем, 1 сообщение, 1 балл репутации

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

    itservice (wpgrabber-tune.blogspot.com)
    Очков активности: 1.5 0 тем, 1 сообщение, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

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