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


× Быстрый вопрос
Пользователь месяца
Андрей WPM Андрей WPM 1-й за Июль
Очков активности: 2 142 4 темы, 90 сообщений, 14 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография Rodiola
    #1

    Rodiola (rukodelkovo.ru)
    Очков активности: 310.5 1 тема, 66 сообщений, 3 балла репутации

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

    maxnik (konovalovpavel.ru)
    Очков активности: 126 0 тем, 21 сообщение, 4 балла репутации

  • Фотография Андрей WPM
    #3

    Андрей WPM (wpmaster.kz)
    Очков активности: 103.5 Вне конкурса за определение пользователя месяца

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

    annabum
    Очков активности: 75 2 темы, 19 сообщений, 2 балла репутации

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

    IxMaster (site.ru)
    Очков активности: 60 2 темы, 14 сообщений, 2 балла репутации

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

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

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

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

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

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

  • Фотография re-search
    #9

    re-search
    Очков активности: 24 4 темы, 4 сообщения, 1 балл репутации

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

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

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


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

#1 Sosnovskij

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

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

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

 

1-min.png

 

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

 

2-min.png

 

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

 

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

 

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

 

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


 

 

  • 0

Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



#2 Андрей WPM

Андрей WPM
  • Пользователь
  • 842 сообщений
  • Репутация: 113

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

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


  • 0


#3 Sosnovskij

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

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

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


  • 0

Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



#4 Андрей WPM

Андрей WPM
  • Пользователь
  • 842 сообщений
  • Репутация: 113

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

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


  • 1


#5 Sosnovskij

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

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

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

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


  • 0

Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



#6 Андрей WPM

Андрей WPM
  • Пользователь
  • 842 сообщений
  • Репутация: 113

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

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

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

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

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


  • 0


#7 Sosnovskij

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

Отправлено 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/. Добавить меня в TelegramTwitterFacebook.



#8 Андрей WPM

Андрей WPM
  • Пользователь
  • 842 сообщений
  • Репутация: 113

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

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

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


  • 0


#9 Андрей WPM

Андрей WPM
  • Пользователь
  • 842 сообщений
  • Репутация: 113

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

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


  • 0


#10 Sosnovskij

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

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

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


  • 0

Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



robot

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


Похожие темы

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

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