@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
67 lines (60 loc) • 2.48 kB
HTML
<html>
<head>
<title>Kit Digital / Universidad San Sebastían</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/css/theme.css" rel="stylesheet" type="text/css" />
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body class>
<div class="">
<section class="mb-64">
<!-- component markup here -->
<section class="w-100">
<div class="flex gap-80 mt-160">
<div class="flex flex-column gap-12">
<span class="h6">Default tooltip</span>
<span data-uss-tooltip data-uss-content="Default">
<i class="uss-icon ri-question-line"></i>
</span>
</div>
<div class="flex flex-column gap-12">
<span class="h6">Delayed tooltip</span>
<span
data-uss-tooltip
data-uss-content="delayed 500ms to open and 100ms to close"
data-uss-delay="500, 100"
>
<i class="uss-icon ri-question-line"></i>
</span>
</div>
<div class="flex flex-column gap-12">
<span class="h6">Tooltip with inline HTML</span>
<span
data-uss-tooltip
data-uss-placement="top-start"
data-uss-content="<span style='color:tomato; font-weight:700; font-size:24px'>HTML with inline styles</span>"
>
<i class="uss-icon ri-question-line"></i>
</span>
</div>
<div class="flex flex-column gap-12">
<span class="h6">Tooltip target-id reference</span>
<span data-uss-tooltip data-uss-content-target="1" data-uss-placement="bottom">
<i class="uss-icon ri-question-line"></i
></span>
</div>
</div>
<div data-uss-tooltip-content-id="1" class="uss-tooltip">
<span class="uss-tooltip__content-title">Title content</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet
consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</div>
</section>
<!-- component markup here -->
</section>
</div>
<script src="/js/main.js" type="module"></script>
</body>
</html>