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



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

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

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

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

 

1-min.png

 

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

 

2-min.png

 

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

 

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

 

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

 

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


 

 

  • 0

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



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

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

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


  • 0

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



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

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

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


  • 0

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



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

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

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


  • 1

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



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

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

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

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


  • 0

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



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

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

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

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

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

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


  • 0

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



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

Отправлено 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
  • Модератор
  • 972 сообщений
  • Репутация: 145

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

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

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


  • 0

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



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

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

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


  • 0

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



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

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

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


  • 0

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



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


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

Пользователь месяца
FIvYUr FIvYUr 1-й за Декабрь
Очков активности: 2 062 0 тем, 125 сообщений, 11 баллов репутации
Сайт: moy-evroopt.ru
ТОП самых активных за этот месяц
  • Фотография albedo
    #1

    albedo (online24news.ru)
    Очков активности: 1620 6 тем, 102 сообщения, 9 баллов репутации

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

    Totti
    Очков активности: 975 3 темы, 41 сообщение, 13 баллов репутации

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 189 0 тем, 18 сообщений, 7 баллов репутации

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

    Santey
    Очков активности: 150 20 тем, 40 сообщений, 1 балл репутации

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

    Bilish
    Очков активности: 147 20 тем, 38 сообщений, 1 балл репутации

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

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

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

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

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

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

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

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

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

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

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

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