Проанализируйте процесс выполнения. Наведите указатель мыши на узел, чтобы определить, существует ли этот узел для включения реализации всплывающей подсказки (имя класса, атрибуты и т. д.). Определите тему и местоположение (имя класса, атрибуты и т. д.). Создать/отобразить. пузыри, чтобы учиться у других.
Давайте сначала посмотрим на стиль всплывающей подсказки element-ui.
Очевидно, положение пузырька добавляется с помощью JavaScript-скрипта.
Без лишних слов, давайте установим некоторые ожидания. Никаких сценариев JavaScript не требуется. Реализация на чистом CSS не требует добавления новых элементов** (с использованием псевдоэлементов после и до)** Нет необходимости в сопоставлении имен классов, напрямую с помощью селекторов атрибутов**. ([attr ])** Поддерживает стиль по умолчанию** (когда тег не определяет тему и положение)** Императивный** (определите его непосредственно в теге, а затем оставьте для соответствия css)** Используйте sass реализовать тему и позицию разработки пузырькового препроцессора (студенты, которые не понимают, могут преобразовать его в css ) Спецификация директивы определения HTML
императивное заявление<button Tooltip='Я контент-утка' effect='light' Placement='top-left'>Вверху слева</button>
Сначала напишите несколько кнопок
Ссылка на стиль element-ui
<div class=container> <div class=top> <button Tooltip=top Placement=top-left effect=light>вверху слева</button> <button Tooltip=вверху слева вверху слева Placement=top>вверху</button> < button Tooltip=top-right Placement=top-right>верхний правый</button> </div> <div class=left> <button Tooltip=верхний левый верхний левый верхний левый верхний левый верхний левый верхний левый верхний левый верхний левый верхний левый Placement=left-top>слева вверху</button> <button Tooltip=leftplacement=left effect=light>left</button> < button Tooltip=left и right Placement=left-Bottom >Внизу слева</button> </div> <div class=right> <button Tooltip=верхний правый верхний правый верхний правый верхний правый верхний правый верхний правый верхний правый верхний правый верхний правый Placement=right-top>правый верхний</button> <button Tooltip=right Placement=right effect=light>right</button> < button Tooltip=right Lower Placement=right-bottom> Внизу справа</button> </div> <div class=bottom> <button Tooltip=внизу слева внизу слева Placement=bottom-left>внизу слева</button> <button Tooltip=Bottom Placement=Bottom Effect=Light>Внизу</button> <button Tooltip=Bottom Right Placement=Bottom-Right>Внизу справа</button> </div></div>реализация логики основного кода CSS
при наведении курсора мониторится перемещение мыши внутрь и наружу, **[tooltip]** соответствует меткам с этим атрибутом, после — пузырек, перед — треугольник
/* Сопоставляем элементы с атрибутом всплывающей подсказки */[tooltip] { Position: относительный; /* Стиль пузырьков по умолчанию*/ &::after { display: none; content: attr(tooltip); /* Стиль треугольников по умолчанию* / & ::before { display: none; content: ''; } /* Наведите указатель мыши на элемент, чтобы отобразить пузырьки и треугольники */ &:hover { &::after { display:block } &::before { дисплей: блокировать } }}Теперь эффект будет эффективен после наведения на него мыши.
Чтобы легко увидеть эффект, тест может блокировать пузыри и треугольники по умолчанию.
/* Стиль пузырьков по умолчанию*/&::after { display:block; content: attr(tooltip);}/* Стиль треугольников по умолчанию*/&::before { display:block; content: '';}Текущий эффект следующий
Основной дисплей, конечно, настроен на абсолютное позиционирование.
/* Стиль пузырька по умолчанию */&::after { display:block; content: attr(tooltip); ширина: 200 пикселей; радиус границы: 4 пикселя; тень окна: 0 10 пикселей 20 пикселей -5 пикселей rgba (0, 0, 0, 0.4); z-index: 100; @extend .tooltip-theme-dark; /* Наследовать тему по умолчанию (белый текст на черном фоне) */ }/* Стиль треугольника по умолчанию */&::before { display: блок; содержимое: ''; позиция: абсолютная; граница: 5 пикселей сплошной прозрачный; z-index: 100; @extend .triangle-theme-dark; */}Текущий эффект следующий
Определите по две темы каждая
$white: #fff;$black: #313131;/* Bubble theme*/.tooltip-theme-dark { color: $white; background-color: $black;}.tooltip-theme-light { color: $black; цвет фона: $white; граница: 1 пиксель сплошной $black;}/* треугольник тема*/.triangle-theme-dark { border-top-color: $black;}.triangle-theme-light { border-top-color: $black /* Сейчас то же, что и dark*/}; Настройте положения пузырьков и треугольников (только пример одного направления) /* Положение пузырька*//*----Top----*/.tooltip-placement-top { Bottom: Calc(100% + 10px left: 50%; Transform: Translate(-50%, 0); );}.tooltip-placement-top-right { внизу: Calc(100% + 10px); слева: 100%; Transform: Translate(-100%, 0)}.tooltip-placement-top-left { Bottom: Calc(100% + 10px); Left: 0; Transform: Translate(0, 0)}/* Положение треугольника*//*----top-- --*/.triangle-placement-top { снизу: Calc(100% + 5px слева: 50%; Transform: Translate(-50%, 0);}.triangle-placement-top-left { внизу: Calc(100% + 5 пикселей); слева: 10 пикселей;}.triangle-placement-top-right { внизу: Calc(100% + 5 пикселей справа: 10 пикселей;} Место съемки, объектЭто также основной код. Используйте селектор атрибутов, чтобы сопоставить значение на метке, а затем установите разные стили.
Соответствующие пузыри, темы треугольников
&[effect=light] { &::after { @extend .tooltip-theme-light } &::before { @extend .triangle-theme-light }}Сопоставьте позиции пузырьков и треугольников, 12 позиций.
@each $placement вверху, вверху справа, вверху слева, справа, справа вверху, справа внизу, внизу, внизу справа, внизу слева, слева, слева вверху, слева внизу { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement} } &::before { @extend .triangle-placement-#{$placement} }};Если метка не имеет атрибута размещения или пуста, по умолчанию будет унаследована верхняя позиция.
&:not([placement]),&[placement=] { &::after { @extend .tooltip-placement-top } &::before { @extend .triangle-placement-top }}Текущий эффект следующий
Давайте удлиним текст и добавим display:none к стилям пузырьков и треугольников по умолчанию.
Разделены на четыре направления: вверх, вниз, влево и вправо, четыре анимации.
@keyframes аниме-top { from { непрозрачность: .5; низ: 150%; }}@keyframes аниме-нижний { from { непрозрачность: .5; верх: 150%; @keyframes аниме-слева { from { непрозрачность: .5; вправо: 150%; }}@keyframes аниме-право { from { непрозрачность: .5; влево: 150%;Сопоставьте положение пузырька, чтобы определить, какую анимацию выполнить. Используйте **[attr^=]** для выбора. Например, также можно сопоставить верхний левый и верхний правый угол.
/* Установить анимацию*/@each $placement сверху, справа, снизу, слева { &[placement^=#{$placement}] { &::after, &::before { анимация: аниме-#{$placement} 300 мс замедление вперед } }}Конечный эффект следующий.
Прилагается адрес codepen: codepen.io/anon/pen/yR…
Подвести итогВышеуказанное представляет собой чистую реализацию CSS (без сценария). Эффект текстовой подсказки директивы Html, представленный редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам. время. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!