HTML Title ile açıklama kutusu

emreunel159 · 11 Eylül 2023

DRIVER Güncel mi dedi:
Kodun atabileceğiniz kısmını, css ile birlikte özelden iletme imkanınız var mıdır ?

Burdan da paylaşabilirim. Zaten siteyi canlıya almaya düşünmüyorum. Film sitesi olduğu için telif haklarına girer. C# uygulamam için CefSharptan site oynatmak için yaptım canlıya da almam çok büyük ihtimalle.

Kod:

<div class="tanitim-container">
<div class="transparan-alive"><img class="transparan-image" src="Resimler/Afis-trailer-gerikalanlar/alive-tp.png" alt="alive"></div>
<div class="film-adi">
<h1>#Alive</h1>
</div>
<div class="rating" title="45.058 votes">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star"></i>
<i class="bi bi-star"></i>
</div>

Bu kısmını atsam yeterli olur sanırım. Çünkü sadece bu dive title eklemek istiyorum.

css kısmı:

.tanitim-container .rating{
color: #FFD700;
font-size: 1.1rem;
margin-left: 220px;
margin-top: 15px;
width: 110px;
}
.tanitim-container .rating:hover{
cursor: pointer;
}

snageX dedi:
Dostum Tooltip ile değiştiriyorsun fakat gerçekten çözdüğüm zaman yazacağım buraya, kafamı yoracağım hırs ettim.

Zamanın yoksa uğraşma dostum. Zevk için yapıyorum boş vaktimde acil bir proje değil ama illa taktım dersen benim içinde çok iyi olur.

snageX · 11 Eylül 2023

İfade uyarısı veriyor forum o yüzden hastebin paylaşıyorum. Hastebin

Şuan githubdan çaldığım Rate kodu ve üzerine eklediğim tooltip kodu bu şekilde, biraz kötü şuanda ama çözüyorum yavaştan.

DRIVER Güncel mi · 11 Eylül 2023

Bugün de Front-End tarafında bir bilgi öğrendim.

emreunel159 · 11 Eylül 2023

DRIVER Güncel mi dedi:
Bugün de Front-End tarafında bir bilgi öğrendim.

Ne güzel

ne öğrendin?

snageX dedi:
İfade uyarısı veriyor forum o yüzden hastebin paylaşıyorum. Hastebin

Şu an GitHub'dan çaldığım Rate kodu ve üzerine eklediğim tooltip kodu bu şekilde, biraz kötü şu anda ama çözüyorum yavaştan.

Kodu inceledim ve yeni HTML oluşturup denedim. Benim Yıldızlar <i> ile görsel olacak şekilde yaptım kendi koduma uyarlamam zor olacak gibi. Yukarıya kullandığım kodu atmıştım onu da kullanabilirsin yardımcı olur.

snageX · 11 Eylül 2023

emreunel159 dedi:
Ne güzel ne öğrendin?

Kodu inceledim ve yeni HTML oluşturup denedim. Benim Yıldızlar <i> ile görsel olacak şekilde yaptım kendi koduma uyarlamam zor olacak gibi. Yukarıya kullandığım kodu atmıştım onu da kullanabilirsin yardımcı olur.

Üzgünüm o kadarını yapamayacağım sanırım, ekstra bir şey eklemediğin sürece Tooltip'de istediğin bölümü değiştiremiyorsun, bu da responsive'i bozuyor. Bu konuda yardımcı olamayacakmışım onu fark ettim.

emreunel159 · 11 Eylül 2023

snageX dedi:
Üzgünüm o kadarını yapamayacağım sanırım, ekstra bir şey eklemediğin sürece Tooltip'de istediğin bölümü değiştiremiyorsun, bu da responsive'i bozuyor. Bu konuda yardımcı olamayacakmışım onu fark ettim.

Sorun değil hocam. Oturup bir satır bir şey denemen bile benim için çok değerli bir şey. Vaktini ayırıp denediğin için çok minnettarım teşekkürler tekrardan.

Zamanını ayırıp bu konuya cevap veren herkese teşekkür ederim. Sonunda bir yabancı kaynak buldum ve title öğesinin tarayıcıya özel olduğu için değiştirilmediğini öğrendim. Tek çarem çakma title yapmak tekrardan teşekkürler herkese. Konu kapanmıştır.

TheAny · 11 Eylül 2023

Böyle bir şey denenemez mi? Fare üstüne gelince çıkıyor.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div custom-title="title" onmouseover="customTitle()">Örnek custom title</div>
    <script src="script.js"></script>
</body>
</html>

JavaScript:

let mousePos = { x: undefined, y: undefined };
window.addEventListener('mousemove', (event) => {
    mousePos = { x: event.clientX, y: event.clientY };
});
 
var css = document.styleSheets[0].cssRules;
function customTitle() {
    for(var i = 0; i < css.length; i++) {
        if(css[i].selectorText == "div[custom-title]:hover::after") {
            css[i].style.top = mousePos.y + "px";
            css[i].style.left = (mousePos.x / 2) + "px";
        }
    }
}

CSS:

div {
    position: relative;
    display: inline-block;
}
div[custom-title]:hover::after {
    content: attr(custom-title);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0px 5px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
}

DRIVER Güncel mi · 11 Eylül 2023

emreunel159 dedi:
Sorun değil hocam. Oturup bir satır bir şey denemen bile benim için çok değerli bir şey. Vaktini ayırıp denediğin için çok minnettarım teşekkürler tekrardan.

Zamanını ayırıp bu konuya cevap veren herkese teşekkür ederim. Sonunda bir yabancı kaynak buldum ve title öğesinin tarayıcıya özel olduğu için değiştirilmediğini öğrendim. Tek çarem çakma title yapmak tekrardan teşekkürler herkese. Konu kapanmıştır.

Şimdi arkadaşın dediği "tooltip" metodunun işleyişine baktım. İşleyiş mantığı baya basit bir şeymiş. Fakat kullanacağım bir olay değil. Bir tane dikdörtgen oluşturuyorsun. O dikdörtgeni en üst katmana taşıyorsun ki üstte gözüksün. Sonrasında o dikdörtgeni istediğin konumda ayarlayıp görünürlüğünü "false" durumuna getiriyorsun. Hover işi içeriye girdiğinde, yani üstüne geldiğinizde ise o dikdörtgen görünür oluyor.

emreunel159 · 11 Eylül 2023

TheAny dedi:

Böyle bir şey denenemez mi? Fare üstüne gelince çıkıyor.
Eki Görüntüle 1940693

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div custom-title="title" onmouseover="customTitle()">Örnek custom title</div>
    <script src="script.js"></script>
</body>
</html>

JavaScript:

let mousePos = { x: undefined, y: undefined };
window.addEventListener('mousemove', (event) => {
    mousePos = { x: event.clientX, y: event.clientY };
});
 
var css = document.styleSheets[0].cssRules;
function customTitle() {
    for(var i = 0; i < css.length; i++) {
        if(css[i].selectorText == "div[custom-title]:hover::after") {
            css[i].style.top = mousePos.y + "px";
            css[i].style.left = (mousePos.x / 2) + "px";
        }
    }
}

CSS:

div {
    position: relative;
    display: inline-block;
}
div[custom-title]:hover::after {
    content: attr(custom-title);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0px 5px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
}

DRIVER Güncel mi dedi:
Şimdi arkadaşın dediği "tooltip" metodunun işleyişine baktım. İşleyiş mantığı baya basit bir şeymiş. Fakat kullanacağım bir olay değil. Bir tane dikdörtgen oluşturuyorsun. O dikdörtgeni en üst katmana taşıyorsun ki üstte gözüksün. Sonrasında o dikdörtgeni istediğin konumda ayarlayıp görünürlüğünü "false" durumuna getiriyorsun. Hover işi içeriye girdiğinde, yani üstüne geldiğinizde ise o dikdörtgen görünür oluyor.

Evet tam olarak bu. Benim merak ettiğim title öğesine direkt olarak erişilebilir olup olmadığıydı. Sonuç olarak title öğesi tarayıcının özelliklerine özel olduğu için erişilmiyormuş. Bu gösterdiğiniz yollarla bende pseudo title yapmayı düşünüyorum. Teşekkürler herkese.

spriggan · 11 Eylül 2023

DRIVER Güncel mi dedi:
Şimdi arkadaşın dediği "tooltip" metodunun işleyişine baktım. İşleyiş mantığı bayağı basit bir şeymiş. Fakat kullanacağım bir olay değil. Bir tane dikdörtgen oluşturuyorsun. O dikdörtgeni en üst katmana taşıyorsun ki üstte gözüksün. Sonrasında o dikdörtgeni istediğin konumda ayarlayıp görünürlüğünü "false" durumuna getiriyorsun. Hover işi içeriye girdiğinde, yani üstüne geldiğinizde ise o dikdörtgen görünür oluyor.

Bunun için hazır JavaScript eklentileri var. Kendin yapacak kadar JS bilmiyorsan, onları araştırabilirsin. Hem onlarda daha fazla özellikler oluyor.

HTML Title ile açıklama kutusu

Ayrıntılı düzenleme

emreunel159

Hectopat

snageX

Hectopat

DRIVER Güncel mi

Hectopat

emreunel159

Hectopat

snageX

Hectopat

emreunel159

Hectopat

Dosya Ekleri

TheAny

Gigapat

DRIVER Güncel mi

Hectopat

emreunel159

Hectopat

spriggan

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz