[imdejv1]

Czy da się w prosty sposób zrobić w js (oddzielny plik) tooltipa, który pojawi się w wybranym ciągu css na stronie?
Mam na myśli to, że mam wtyczkę na WP w której to kodzie nie chce grzebać i go zmieniać, ale chciałbym przy jednym tytule, a dokładniej tuż za nim zrobić podpowiedź do tego tytułu po najechaniu na ( ? ). Podpowiedź byłaby wpisana w pojedynczym pliku js z całą funkcją, aby to zadziałało. Jak to zrobić?

Operuje wtedy jednym js w którym sobie dodaje podpowiedzi w wybranych miejscach i opieram się o css (bo to chyba najlepsza opcja czyli:

Przykład:
kod JS z podpowiedzią "Jeśli nie wiesz jak to wypełnić skontaktuj z XYZ".
Umieszczenie w miejscu: #klasa .klasa2 .klasa3 h1

wynik: TYTUŁ(?) z klasą #klasa .klasa2 .klasa3 h1 a po najechaniu na ? "Jeśli nie wiesz jak to wypełnić skontaktuj z XYZ"

Myślę, że to najlepsza opcja bo wtyczki będą się aktualizować (automat mam ustawiony na to), a ja cały czas będę operował sobie tym jednym plikiem jeśli chodzi o tooltipy i bede mial dostep do trudnych miejsc dzieki oparciu o klasy( zawsze to coś).

Co sądzicie?

#js #programowanie #html

[Czlowiek]

@imdejv1: Nie pamiętam jak się to robiło w WP, ale wybrałbym stworzenie sobie własnej wtyczki, która wstrzykuje powyższy JS. Wtedy żaden update nie nadpisze i nie wyrzuci tego skryptu, a co najwyżej musiałbyś updejtować ten selektor do ikony ?, jeżeli zmieni się jej struktura HTML.

[imdejv1]

@Czlowiek: Zgadza się, ale jak to wykonać i czy da się to zrobić miniskryptem js ?

[Czlowiek]

@imdejv1: Być może da się i samym CSS, ale to się upewnię wieczorem, jak będę miał więcej czasu.

[imdejv1]

@Czlowiek: Samym css się nie uda, trzeba by tworzyć :before i content:"". Lepiej chyba ten js i szukanie po css bo po tym najszybciej można dojść do miejsca w którym chce sie umieścić.

[Czlowiek]

@imdejv1:
JS:

(function() {
 function hoverIn() {
 $tooltip.removeClass('hidden');
 }

 function hoverOut() {
 $tooltip.addClass('hidden');
 }

 let $icon = $('')
 .text('[?]')
 .mouseenter(hoverIn)
 .mouseout(hoverOut);
 $('header.post-header')
 .append($icon);

 let $tooltip = $('')
 .text('Jeśli nie wiesz jak to wypełnić skontaktuj z XYZ')
 .addClass('hidden');
 $('header.post-header')
 .prepend($tooltip);
})();

i CSS:

#my-tooltip {
 position: absolute;
 background-color: green;
 width: 100px;
 height: 100px;
 left: 50px;
 top: -50px;
}
#my-icon {
 width: 50px;
 height: 50px;
 background-color: red;
}

mniej więcej tyle, pisane