Не надо ничего предпочитать. Нужно использовать правильный мед...

preg_replace("/href=\"".preg_quote($url,'/')."\"/i", "href=\"$base/$url\"", $html);

Рисуешь то, что тебе нравится в редакторе, например здесь https://yqnn.github.io/svg-path-editor/
потом получившийся path вставляешь в clip-path
Как-нибудь так

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

А в чем проблема посмотреть кто что смотрел?
Таблица подсказок - {ID подсказки, страница (маска страниц, список страниц), селектор, событие, текст подсказки}.
Таблица просмотров {ID юзера, ID подсказки, время демонстрации}
Информация о подсказках с просмотрами left join собирается и выгружается на нужную страницу. Специальный виджет расставляет все непросмотренные подсказки по hover или клику мышки. Он же будет заботится о том, чтобы хранить информацию о показах, либо в localStore, для незарегистрированного, либо в профиле пользователя сайта. Если подсказка демонстрировалась недавно - можно не показывать...
Удобно то, что система получится "независима" от остального сайта, в том смысле, что ее можно убрать и сайт продолжать работать. Можно поставить ее на любой существующий сайт, отдельно настраивать шаблоны сайта не придется, разве что обеспечить вменяемые селекторы для поясняемых элементов.
Если вносится новая фича с подсказкой на сайт - никто ее пока не просмотрел - всем насильно показать.
Придется сделать на каждой странице заметную кнопку "Расскажи мне опять все-все все про ту страницу", это для особо забывчивых. Сделать в профиле пользователя или на странице кнопку-галку "не показывать мне больше ваши всплывающие подсказки", ну чисто для полноты картины мира и ощущения справедливости...